/* ==========================================================================
   TURALON — stage "grafts" (loaded after style.css)
   Configurator + work order · per-sheet links · assembly-manual process · the thread · micro-interactions
   House rules kept: paper / ink / pencil / one vermilion (+ --ok for status only); grid paper only inside frames;
   Shantell (.hand) only for pencil notes; Literata (.voice) for one line; no ambient loops.
   ========================================================================== */

.g-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- micro: hand-drawn underline (nav, footer nav, text links) ---------- */
.nav a::after, .ftr__nav a::after, .g-link::after {
  content: ""; position: absolute; bottom: 0; height: 7px; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.6C13 3.7 25 6.3 39 4.9S67 3.1 82 4.4 95 5.3 98.5 3.6' fill='none' stroke='%23C8401A' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease);
}
.nav a::after { inset-inline: 10px; bottom: 1px; }
.nav a:hover::after, .nav a:focus-visible::after, .ftr__nav a:hover::after, .ftr__nav a:focus-visible::after, .g-link:hover::after, .g-link:focus-visible::after { transform: none; clip-path: inset(0 0 0 0); }
:root[dir="rtl"] .nav a::after, :root[dir="rtl"] .ftr__nav a::after, :root[dir="rtl"] .g-link::after { clip-path: inset(0 0 0 100%); }
:root[dir="rtl"] .nav a:hover::after, :root[dir="rtl"] .nav a:focus-visible::after, :root[dir="rtl"] .ftr__nav a:hover::after, :root[dir="rtl"] .ftr__nav a:focus-visible::after, :root[dir="rtl"] .g-link:hover::after, :root[dir="rtl"] .g-link:focus-visible::after { clip-path: inset(0 0 0 0); }
.ftr__nav a { position: relative; padding-block: 12px; }
.ftr__nav a::after { inset-inline: 0; bottom: 6px; }

/* 44px tall touch target (QA F15); the drawn underline sits under the words, not at the foot of the box */
.g-link { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 0 5px; border: 0; background: none; color: var(--ink); font: 500 15px/1.3 var(--f-body); text-decoration: none; cursor: pointer; }
.g-link::after { inset-inline: 0; bottom: 6px; }
.g-link .btn__arr { width: 16px; height: 16px; flex: none; }
.g-link:hover .btn__arr { transform: translateX(3px); }
:root[dir="rtl"] .g-link:hover .btn__arr { transform: scaleX(-1) translateX(3px); }

/* the per-sheet link: quiet at rest (a hairline), drawn in vermilion on hover */
.g-ask { margin-top: 12px; background: linear-gradient(var(--line), var(--line)) 0 calc(100% - 8px) / 100% 1px no-repeat; }
.svc--compact .g-ask { margin-top: 8px; }
.svc--wide .svc__text > .g-ask { grid-column: 10 / span 3; grid-row: 4; justify-self: start; }
@media (max-width: 1180px) { .svc--wide .svc__text > .g-ask { grid-column: 7 / span 6; grid-row: 5; } }

/* ---------- micro: keycap press (toned down) ---------- */
.btn { --ledge: rgba(0, 0, 0, .55); box-shadow: 0 3px 0 var(--ledge); transform: translateY(0); }
.btn:hover { --ledge: #7A2810; transform: translateY(-1px); box-shadow: 0 4px 0 var(--ledge); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge); transition-duration: .06s; }
.btn--ghost { --ledge: rgba(28, 26, 23, .3); }
.btn--light { --ledge: #8F8676; }
.btn--sm { box-shadow: 0 2px 0 var(--ledge); }
.btn--sm:hover { box-shadow: 0 3px 0 var(--ledge); }
.lang button { transition: color .25s, transform .12s var(--ease); }
.lang button:active { transform: translateY(1px) scale(.95); }
.lang__bar { box-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.lang--big button { box-shadow: 0 2px 0 var(--line); transition: transform .12s var(--ease), box-shadow .12s, background-color .25s, color .25s; }
.lang--big button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.lang--big button[aria-pressed="true"] { box-shadow: 0 2px 0 #000; }

/* ---------- micro: the wordmark written in one stroke ---------- */
.logo { position: relative; }
.logo__t { transition: opacity .3s ease; }
.logo__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.logo__line path { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
@media (hover: hover) {
  .logo:hover .logo__t { opacity: .13; }
  .logo:hover .logo__line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.45, .05, .25, 1) .06s; }
}
.logo:focus-visible .logo__t { opacity: .13; }
.logo:focus-visible .logo__line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.45, .05, .25, 1); }
.loader__line { display: block; overflow: visible; }
.loader__line path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gWrite .65s .1s cubic-bezier(.45, .05, .25, 1) forwards; }
@keyframes gWrite { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   THE THREAD — overlay (built by grafts.js threadLayout)
   ========================================================================== */
.thread { position: absolute; top: 0; left: 0; width: 100%; z-index: 4; pointer-events: none; overflow: visible; }
/* thinner and a touch lighter than the seams, so the seam stays the one signature (polish A5) */
.thread__p { fill: none; stroke: var(--signal); stroke-width: 1.25; stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.thread__ring { fill: none; stroke: var(--signal-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.5s cubic-bezier(.45, .05, .2, 1); }
.thread__dot { fill: var(--signal); }
.thread__tip { fill: var(--signal); opacity: 0; transition: opacity .35s; }
.thread__tip.on { opacity: 1; }
.is-still .thread__ring { transition: none; }
@media (max-width: 899px) { .thread { display: none; } }

/* ==========================================================================
   PROCESS — the assembly manual
   ========================================================================== */
.man__head { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 clamp(40px, 4.4vw, 64px); padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); color: var(--ink-3); font-size: 11px; }
.man__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.man__step { position: relative; min-width: 0; }
.man__step + .man__step::before { content: ""; position: absolute; top: 76px; bottom: 6px; inset-inline-start: -16px; border-inline-start: 1px solid var(--line); }
.man__top { position: relative; display: flex; align-items: center; height: 48px; margin-bottom: 20px; }
.man__no { position: relative; z-index: 1; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 600 19px/1 "Geologica", sans-serif; color: var(--ink); transition: border-color .6s var(--ease), color .6s var(--ease); }
.man__step.in .man__no { border-color: var(--signal); color: var(--signal); }
.man__rail { flex: 1; height: 0; margin-inline-end: -32px; border-top: 1.5px dashed var(--pencil-soft); }
.man__step:last-child .man__rail { margin-inline-end: 0; }
.man__fig { --man-x: 0; position: relative; aspect-ratio: 300 / 210; margin: 0 0 24px; }
.man__fig > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root[dir="rtl"] .man__fig > svg { transform: scaleX(-1); }
:root[dir="rtl"] .man__fig svg text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.man__parts { position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 8px; border: 1px solid rgba(28, 26, 23, .28); border-radius: 10px; background: var(--paper); direction: ltr;
  opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s; }
/* the callout is typed LTR inside (1×, 6×, +1), so its own inline-start would be the left edge in Arabic too */
:root[dir="rtl"] .man__parts { left: auto; right: 0; }
.man__part { display: inline-flex; align-items: center; gap: 3px; }
.man__part b { font: 600 14px/1 "Geologica", sans-serif; color: var(--ink); }
.man__part svg { width: 28px; height: 22px; overflow: visible; }
.man__step.in .man__parts { opacity: 1; transform: none; }
.man__name { margin: 0 0 10px; font: 600 clamp(22px, 2vw, 30px)/1.1 var(--f-display); letter-spacing: -.025em; }
:root[lang="ar"] .man__name { letter-spacing: 0; line-height: 1.35; }
.man__text { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 26em; }

/* Each drawing twice, split by a small vermilion seam (the house mechanic): finished in ink on the start side
   (.man__ink), blue pencil beyond it (.man__sk). --rest (inline, per step) moves on through the manual. */
.man__ink, .man__ink *, .man__part svg * { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.man__ink .w1, .man__ink .c, .man__part .w1 { fill: var(--card); }
.man__ink .w2, .man__part .w2 { fill: #E9E2D4; }
.man__ink .w3, .man__part .w3 { fill: #D8CFBD; }
.man__ink .k1, .man__part .k1 { fill: var(--ink); }
.man__ink .k2 { fill: #34302A; }
.man__ink .k3 { fill: #4A453D; }
.man__ink .v1, .man__part .v1 { fill: var(--signal-2); }
.man__ink .v2 { fill: var(--signal); }
.man__ink .v3 { fill: #A8340F; }
.man__ink .w { fill: var(--wash); }
.man__ink .hl { stroke: rgba(28, 26, 23, .42); stroke-width: 1.05; }
.man__ink .il { stroke-width: 1.1; }
.man__ink .vl { stroke: var(--signal); stroke-width: 2; }
.man__ink .o { fill: var(--ok); stroke: none; }
.man__ink .ar { stroke-width: 1.6; }
.man__ink .pl { stroke: var(--signal); stroke-width: 2.4; }
.man__ink .s, .man__ink .pen { display: none; }
.man__ink .qt { fill: var(--ink); stroke: none; font: 600 20px "Geologica", sans-serif; }
.man__part .pd { stroke: var(--pencil); stroke-width: 1.15; stroke-dasharray: 4 3.4; fill: rgba(60, 100, 168, .06); }
.man__ink .sq, .man__part .sq { fill: rgba(213, 221, 232, .8); }
.man__fig .pd, .man__fig .gh, .man__part .gh { stroke: var(--pencil); stroke-width: 1.15; stroke-dasharray: 3.5 3; fill: rgba(60, 100, 168, .05); }
/* pencil side: one blue line weight, hatch where the ink side is solid, construction lines and measures */
.man__sk { filter: url(#rough); }
.man__sk * { fill: none; stroke: var(--pencil); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.man__sk .k1, .man__sk .k2, .man__sk .k3, .man__sk .v1, .man__sk .v2, .man__sk .v3 { fill: url(#g-hatch); }
.man__sk .w { fill: rgba(60, 100, 168, .07); }
.man__sk .c { fill: var(--paper); } /* pages and sheets hide what lies under them, as in a clean pencil drawing */
.man__sk .hl { stroke-width: 1; stroke-opacity: .7; }
.man__sk .s { stroke-width: 1; stroke-dasharray: 3 3.2; stroke-opacity: .75; }
.man__sk .ar { stroke-width: 1.5; }
.man__sk .pl { stroke-width: 2; }
.man__sk .dl { stroke-width: 1; }
.man__sk .dt { fill: var(--pencil); stroke: none; font: 500 12px "JetBrains Mono", monospace; letter-spacing: .02em; }
.man__sk .qt { fill: var(--pencil); stroke: none; font: italic 400 22px "Shantell Sans", cursive; }
/* the seam: product on the start side, pencil beyond (clip-path is mirrored with the drawing in RTL) */
/* perf: not inherited, and set on the three parts that use it (below), so the 1.6s crossing restyles three
   elements per frame instead of both drawings' whole SVG trees */
@property --man-x { syntax: "<number>"; inherits: false; initial-value: 0; }
.man__ink { clip-path: inset(-20% calc((1 - var(--man-x)) * 100%) -20% -20%); }
.man__sk { clip-path: inset(-20% -20% -20% calc(var(--man-x) * 100%)); }
.man__seam { position: absolute; z-index: 1; top: 17%; bottom: 1%; inset-inline-start: calc(var(--man-x) * 100%); width: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease .95s; }
.man__seam::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -.75px; width: 1.5px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease) .95s; }
.man__seam::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4.5px; width: 9px; border-block: 1.5px solid var(--signal); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease) .95s; }
.man__seam i { position: absolute; top: 62%; inset-inline-start: -6.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(200, 64, 26, .13); }
/* drawing itself, live, when the step comes into view: the pencil strokes (class .dr, never the camelCase
   [pathLength] attribute, which Chrome does not re-match), then the seam drops in and crosses to its rest */
.man__sk .dr { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i, 0) * 24ms), fill-opacity .8s ease calc(.5s + var(--i, 0) * 24ms); }
.man__step.in .man__sk .dr { stroke-dashoffset: 0; fill-opacity: 1; }
.man__sk .pd, .man__sk .gh, .man__sk .dl, .man__sk .s, .man__sk text { opacity: 0; transition: opacity .9s ease calc(.4s + var(--i, 0) * 24ms); }
.man__step.in .man__sk .pd, .man__step.in .man__sk .gh, .man__step.in .man__sk .dl, .man__step.in .man__sk .s, .man__step.in .man__sk text { opacity: 1; }
.man__step.in .man__ink, .man__step.in .man__sk { --man-x: var(--rest, .5); transition: --man-x 1.6s cubic-bezier(.45, .05, .25, 1) 1.15s; }
.man__step.in .man__seam { --man-x: var(--rest, .5); opacity: 1; transition: opacity .4s ease .95s, --man-x 1.6s cubic-bezier(.45, .05, .25, 1) 1.15s; }
/* the crossing moves a clip on composited layers: the pencil drawing (rough filter) is not repainted per frame */
.man__ink, .man__sk, .man__seam { will-change: transform; }
.man__step.in .man__seam::before, .man__step.in .man__seam::after { transform: none; }
.man__steps.is-still *, .man__steps.is-still *::before, .man__steps.is-still *::after { transition: none !important; }

/* ==========================================================================
   CLOSE — the work order: 01 configurator, 02 message
   ========================================================================== */
.close__cta { position: relative; }
.wo { position: relative; margin-top: clamp(64px, 6vw, 96px); background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(24px, 4vw, 56px); }
.wo::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); border-radius: 2px; pointer-events: none; }
.wo__bar { position: relative; display: flex; justify-content: space-between; gap: 20px; margin: 0 0 clamp(36px, 4vw, 60px); padding-bottom: 11px; border-bottom: 1.5px solid var(--ink); color: var(--ink-3); font-size: 11px; }
.wo__bar span:first-child { color: var(--ink); font-weight: 600; }
.wo__no { display: block; margin: 0 0 14px; color: var(--pencil); font-size: 12px; }
.wo__h, .cfg__h { margin: 0; font: 600 clamp(28px, 2.6vw, 40px)/1.08 var(--f-display); letter-spacing: -.03em; }
:root[lang="ar"] .wo__h, :root[lang="ar"] .cfg__h { letter-spacing: 0; line-height: 1.35; }

/* 01 · configurator */
.cfg { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.cfg__side { grid-column: 1 / span 5; padding-inline-end: clamp(0px, 2vw, 32px); }
.cfg__main { grid-column: 6 / span 7; }
.cfg__hint { margin: 14px 0 28px; color: var(--ink-2); font-size: 16px; max-width: 30em; }
.cfg__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.cfg__list li { border-bottom: 1px solid var(--line); }
.cfg__item { position: relative; display: grid; grid-template-columns: 24px 26px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 52px; padding: 9px 6px; cursor: pointer; transition: background-color .25s; -webkit-tap-highlight-color: transparent; }
.cfg__item:hover { background: rgba(28, 26, 23, .035); }
.cfg__item input { position: absolute; inset-inline-start: 6px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.cfg__item i { font-size: 11px; color: var(--pencil); font-style: normal; }
.cfg__item b { font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink-2); transition: color .25s; }
.cfg__item input:checked ~ b { color: var(--ink); }
.cfg__box { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--card); box-shadow: 0 2px 0 rgba(28, 26, 23, .22); transition: transform .12s var(--ease), box-shadow .12s; }
.cfg__item:active .cfg__box { transform: translateY(2px); box-shadow: 0 0 0 rgba(28, 26, 23, .22); }
.cfg__box svg { position: absolute; left: -3px; top: -5px; width: 28px; height: 28px; overflow: visible; }
.cfg__box path { fill: none; stroke: var(--signal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .38s cubic-bezier(.5, 0, .2, 1); }
.cfg__item input:checked + .cfg__box path { stroke-dashoffset: 0; }
.cfg__item input:focus-visible + .cfg__box { outline: 2px solid var(--signal); outline-offset: 3px; }
.cfg__list.is-nudge .cfg__box { animation: gNudge .5s var(--ease) 1; }
@keyframes gNudge { 30% { transform: translateX(calc(-3px * var(--d))); border-color: var(--signal); } 60% { transform: translateX(calc(2px * var(--d))); } }
.cfg__clear { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.cfg__clear[hidden] { display: none; }

/* the drawing set: a sheet with its title strip, two blank sheets behind it */
.cfg__stack { position: relative; z-index: 0; }
.cfg__stack::before, .cfg__stack::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border: 1px solid rgba(28, 26, 23, .3); }
.cfg__stack::before { transform: translate(calc(7px * var(--d)), 7px); }
.cfg__stack::after { transform: translate(calc(14px * var(--d)), 14px); z-index: -2; }
/* two sheets in one grid cell (draft under, product over), same header, same cells in the same places */
.cfg__board { --s: 0; --lab: 38px; position: relative; display: grid; border: 1.5px solid var(--ink); background: var(--card); container: cfgb / inline-size; }
/* the sheet stays in view while the list is ticked (wide layouts only) */
@media (min-width: 861px) { .cfg__main { position: sticky; top: calc(var(--hdr, 68px) + 24px); } }
/* the dark section still clips what bleeds out, without becoming a scroll box (that would switch sticky off) */
@supports (overflow: clip) { .close { overflow: clip; } }
:root[lang="ar"] .cfg__board { --lab: 46px; }
.cfg__sk, .cfg__pr { grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column; padding: 16px 20px 20px; overflow: hidden; }
.cfg__hd { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; height: 44px; margin-bottom: 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cfg__sk .cfg__hd { border-bottom: 1px dashed var(--pencil-soft); }
.cfg__hdt { font-size: 22px; line-height: 1.6; color: var(--pencil); }
.cfg__hdn { font-size: 11px; color: var(--pencil); }
.cfg__cells { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, calc(50% - 6px)), 1fr)); gap: 12px; align-content: center; }
.cfg__cell, .cfg__tile, .cfg__ghost { position: relative; min-width: 0; aspect-ratio: 4 / 3; border-radius: 4px; }
.cfg__cell, .cfg__tile { display: grid; grid-template-rows: minmax(0, 1fr) var(--lab); padding: 12px 12px 10px; }
.cfg__cell:not(.in), .cfg__tile:not(.in) { display: none; }
.cfg__cells[data-n="1"] > * { aspect-ratio: 16 / 9; }
.cfg__cell > i, .cfg__tile > i { position: absolute; top: 9px; inset-inline-start: 11px; font: 400 11px/1 "JetBrains Mono", monospace; font-style: normal; }
.cfg__art { min-height: 0; display: grid; place-items: center; }
.cfg__art svg { width: 72%; height: 100%; max-height: 100%; min-height: 0; }
.cfg__lab { align-self: end; margin: 0; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the draft cell: dashed pencil outline, pencil drawing, a pencilled caption */
.cfg__cell { border: 1px dashed rgba(60, 100, 168, .42); }
.cfg__cell > i { color: var(--pencil); }
.cfg__cell .g-sk { filter: url(#rough); }
.cfg__cap { font-size: 14px; line-height: 1.25; color: var(--pencil); opacity: 0; transition: opacity .5s ease .5s; }
:root[lang="ar"] .cfg__cap { font-size: 16px; line-height: 1.35; }
.cfg__cell.on .cfg__cap { opacity: 1; }
/* empty: three faint ghost cells with pencilled question marks, the hint over them */
.cfg__ghost { display: none; border: 1.5px dashed var(--pencil); opacity: .28; }
.cfg__ghost svg { width: 100%; height: 100%; fill: none; stroke: var(--pencil); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.cfg__board.is-empty { min-height: 360px; }
.cfg__board.is-empty .cfg__ghost { display: block; }
/* the hint sits over the lower part of the ghost row, the question marks stay readable above it */
.cfg__cells { position: relative; }
.cfg__empty { position: absolute; left: 50%; top: calc(50% + 18px); transform: translateX(-50%); width: max-content; max-width: 86%; margin: 0; padding: 4px 14px 6px; text-align: center; font-size: 21px; line-height: 1.35; color: var(--pencil); background: rgba(255, 252, 246, .92); border-radius: 3px; opacity: 0; transition: opacity .4s; pointer-events: none; }
:root[dir="rtl"] .cfg__empty { transform: translateX(50%); left: auto; right: 50%; }
:root[lang="ar"] .cfg__empty { font-size: 24px; }
.cfg__board.is-empty .cfg__empty { opacity: 1; }
/* narrow boards (phones): two cells a row, square cells so the drawing and a two-line name both fit */
@container cfgb (max-width: 480px) {
  .cfg__ghost:nth-child(3) { display: none !important; }
  .cfg__sk, .cfg__pr { padding: 10px 12px 14px; }
  .cfg__hd { height: 38px; margin-bottom: 12px; }
  .cfg__hdt { font-size: 19px; } .cfg__prt { font-size: 20px; }
  .cfg__cells { gap: 10px; }
  .cfg__cell, .cfg__tile, .cfg__ghost { aspect-ratio: 1; }
  .cfg__cells[data-n="1"] > * { aspect-ratio: 4 / 3; }
  .cfg__cell, .cfg__tile { padding: 10px 9px 8px; }
  .cfg__art svg { width: 80%; }
  .cfg__tn { font-size: 12.5px; }
  .cfg__cap { font-size: 13.5px; }
  .cfg__empty { top: calc(50% + 25px); }
}
/* pencil drawing on the draft sheet */
.g-sk * { fill: none; stroke: var(--pencil); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.g-sk .k, .g-sk .v, .g-sk .o { fill: url(#g-hatch); }
.g-sk .t { stroke-width: 1.1; }
.g-sk .l2 { stroke-width: 1.7; }
.g-sk .s { stroke-dasharray: 3 3.5; }
.g-sk .w, .g-sk .vh { stroke-dasharray: 2 4; }
.g-sk .dr { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset .9s var(--ease) calc(var(--i, 0) * 40ms), fill-opacity .6s ease calc(.45s + var(--i, 0) * 40ms); }
.g-sk .s, .g-sk .w, .g-sk .vh { opacity: 0; transition: opacity .6s ease calc(.3s + var(--i, 0) * 40ms); }
.cfg__cell.on .g-sk .dr { stroke-dashoffset: 0; fill-opacity: 1; }
.cfg__cell.on .g-sk .s, .cfg__cell.on .g-sk .w, .cfg__cell.on .g-sk .vh { opacity: .8; }
.cfg__board.no-anim *, .cfg__board.no-anim *::before { transition: none !important; }

/* the composed product sheet, revealed by the seam */
.cfg__pr { background: var(--card); clip-path: inset(-1px calc((1 - var(--s)) * 100%) -1px 0); }
:root[dir="rtl"] .cfg__pr { clip-path: inset(-1px 0 -1px calc((1 - var(--s)) * 100%)); }
.cfg__prt { font-size: 24px; line-height: 1.5; color: var(--ink); }
.cfg__prn { color: var(--ink-3); font-size: 11px; }
.cfg__tile { background: #F5F1E8; border: 1px solid var(--line); }
.cfg__tile > i { color: var(--ink-3); }
.cfg__tn { font: 600 13px/1.3 var(--f-body); color: var(--ink); }
:root[lang="ar"] .cfg__tn { font-size: 14px; line-height: 1.45; }
.cfg__cells[data-n="1"] .cfg__tn, .cfg__cells[data-n="2"] .cfg__tn { font-size: 15px; }
.cfg__cells[data-n="1"] .cfg__cap, .cfg__cells[data-n="2"] .cfg__cap { font-size: 16px; }
/* finished illustration vocabulary (house palette only) */
.g-ill .c { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.g-ill .p { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; }
.g-ill .w { fill: var(--wash); stroke: none; }
.g-ill .k { fill: var(--ink); stroke: none; }
.g-ill .v { fill: var(--signal); stroke: none; }
.g-ill .o { fill: var(--ok); stroke: none; }
.g-ill .l { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.g-ill .l2 { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-ill .t { fill: none; stroke: rgba(28, 26, 23, .3); stroke-width: 3; stroke-linecap: round; }
.g-ill .t2 { stroke: var(--ink); stroke-width: 4.2; }
.g-ill .vl { fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.g-ill .ol { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-ill .vh { fill: var(--signal); fill-opacity: .14; stroke: none; }
.g-ill .eye { fill: #fff; stroke: none; }
.g-ill .hubm { fill: var(--paper); stroke: none; }
.g-ill .s { display: none; }

/* the board's seam: the house seam, shown once the set has been built */
.cfg__seam { display: none; }
.cfg__board.is-built .cfg__seam { display: block; }
.cfg__seam .seam__knob { width: 40px; height: 40px; margin-top: -20px; inset-inline-start: -20px; }
/* while it crosses, the seam says what it does ("ürün | taslak"); the labels step back once the sheet is finished */
.cfg__seam .seam__tag { transition: opacity .5s ease; }
.cfg__seam .seam__tag--p { inset-inline-end: 30px; opacity: min(1, calc(var(--s) * 7)); }
.cfg__seam .seam__tag--s { inset-inline-start: 30px; background: var(--card); opacity: min(1, calc((1 - var(--s)) * 7)); }
.cfg__board.is-done .seam__tag { opacity: 0; }

/* title strip */
.cfg__tb { position: relative; display: flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-top: 0; background: var(--paper); font-size: 11px; }
.cfg__tb > span { display: flex; flex-direction: column; gap: 3px; padding: 9px 16px 10px; border-inline-end: 1px solid var(--line); }
.cfg__tb > span:last-child { margin-inline-start: auto; border-inline-end: 0; border-inline-start: 1px solid var(--line); }
.cfg__tb b { font-weight: 400; color: var(--ink-3); }
.cfg__tb em { font-style: normal; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.cfg__tb .is-pr em { color: #2C6E4A; }
.cfg__tb svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cfg__count { direction: ltr; unicode-bidi: isolate; }

.cfg__act { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; margin-top: 34px; }
.cfg__act .cfg__msg { flex: 1 1 14em; }
.cfg__build { white-space: nowrap; margin-inline-start: auto; }
.cfg__msg { margin: 0; color: var(--ink-2); font-size: 15px; min-height: 1.4em; }
/* not yet available: a drawn outline (still readable, still clickable: it says what to do first) instead of a greyed-out pill */
.cfg__build[aria-disabled="true"] { --bg: transparent; --fg: var(--ink); --ledge: transparent; border: 1.5px dashed var(--ink-3); }
.cfg__build[aria-disabled="true"]:hover::before { transform: scaleX(0); }
.cfg__build[aria-disabled="true"]:hover { color: var(--ink); border-color: var(--ink); --ledge: transparent; transform: none; }
.cfg__build.is-tell .btn__arr { transform: rotate(90deg); }
.cfg__build.is-tell:hover .btn__arr { transform: rotate(90deg) translateX(3px); }
:root[dir="rtl"] .cfg__build.is-tell .btn__arr, :root[dir="rtl"] .cfg__build.is-tell:hover .btn__arr { transform: rotate(90deg); }

/* 02 · the message */
.wo__msg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 34px; margin-top: clamp(40px, 4vw, 64px); padding-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid var(--line); }
.wo__head { grid-column: 1 / span 4; }
.wo__text { margin: 16px 0 0; color: var(--ink-2); }
.wo__fields { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 30px; }
.wo__foot { grid-column: 6 / span 7; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.wo__privacy { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 30em; }
.wo__fail { grid-column: 6 / span 7; margin: 0; padding: 12px 16px; border-inline-start: 2px solid var(--signal-ink); background: rgba(200, 64, 26, .06); color: var(--ink); font-size: 15px; line-height: 1.5; }
.wo__fail a { color: var(--signal-ink); }
.wo__ok { grid-column: 6 / span 7; display: none; align-items: center; gap: 22px; outline: none; }
.wo.is-sent .wo__foot { display: none; }
.wo.is-sent .wo__ok { display: flex; }
.wo__check { flex: none; width: 66px; height: 66px; overflow: visible; }
.wo__check path { fill: none; stroke: var(--ok); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wo__ring { stroke-width: 1.6; transition: stroke-dashoffset .75s cubic-bezier(.45, .05, .25, 1); }
.wo__tick { stroke-width: 3.4; transition: stroke-dashoffset .45s cubic-bezier(.5, 0, .2, 1) .6s; }
.wo__ok.in .wo__check path { stroke-dashoffset: 0; }
.wo__okt { margin: 0 0 6px; font: 600 clamp(19px, 1.6vw, 22px)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.wo__again { font-size: 14px; color: var(--ink-2); }

.wo .fld { position: relative; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); align-content: start; }
.wo .fld--wide { grid-column: 1 / -1; }
/* label row: the name, then whether it is needed (a vermilion dot + "zorunlu", or a quiet "isteğe bağlı") */
.fld__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.fld__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .03em; color: var(--ink-3); white-space: nowrap; }
.fld__tag--req { color: var(--signal-ink); }
.fld__tag--req::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
:root[lang="ar"] .fld__tag { font: 400 13px/1.2 var(--f-body); letter-spacing: 0; }
.wo .fld input, .wo .fld textarea { font: 400 17px var(--f-body); color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid rgba(28, 26, 23, .6); padding: 12px 0; min-height: 48px; border-radius: 0; outline: none; width: 100%; transition: border-color .3s; }
.wo .fld textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
/* addresses and numbers are typed left to right, also in Arabic (they stay on the start side of the field) */
:root[dir="rtl"] .wo .fld input[type="email"], :root[dir="rtl"] .wo .fld input[type="tel"] { direction: ltr; text-align: right; }
.wo .fld input:focus, .wo .fld textarea:focus { border-bottom-color: var(--ink); outline: none; }
.wo .fld input:focus-visible, .wo .fld textarea:focus-visible { outline: none; }
/* field outline: drawn round the field when it takes focus */
.fld__o { position: absolute; left: -12px; top: -10px; width: calc(100% + 24px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.fld__o rect { x: .75px; y: .75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: 7px; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
.fld:focus-within .fld__o rect { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.45, .05, .25, 1); }
.fld.is-bad .fld__o rect { stroke: var(--signal); stroke-dashoffset: 0; }
.fld.is-bad input, .fld.is-bad textarea { border-bottom-color: var(--signal-ink); }
.fld__err { color: var(--signal-ink); font-size: 13px; line-height: 1.3; }
.wo__picked { gap: 4px; }
.wo__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding-top: 6px; }
.wo__none { color: var(--ink-3); font-size: 15px; }
.wo__chips .g-link { font-size: 15px; }
.chip-g { display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 12px 4px; border: 1px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 14px/1.2 var(--f-body); box-shadow: 0 2px 0 rgba(28, 26, 23, .18); }
.chip-g i { font: 400 11px/1 "JetBrains Mono", monospace; color: var(--pencil); font-style: normal; }
.chip-g button { position: relative; flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .2s, transform .12s; }
.chip-g button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* 44px touch target */
.chip-g button:hover { background: rgba(28, 26, 23, .08); }
.chip-g button:active { transform: translateY(1px); }
.chip-g svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .man__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .man__step:nth-child(odd)::before { display: none; }
  .man__step:nth-child(2n) .man__rail { margin-inline-end: 0; }
  .cfg__side { grid-column: 1 / span 5; }
  .cfg__main { grid-column: 6 / span 7; }
}
@media (max-width: 860px) {
  /* integrate: tablets (601-860) keep the 2 x 2 manual (one column left half the width empty); phones go to one column below */
  .man__steps { row-gap: 56px; }
  .man__step::before { display: none; }
  .man__rail { margin-inline-end: 0; }
  .man__fig { max-width: 340px; }
  /* stretch: the board and the build button take the full column (they shrink-wrapped to the empty-state text) */
  .cfg { display: flex; flex-direction: column; align-items: stretch; }
  .cfg__stack { width: 100%; } .cfg__act { align-self: stretch; }
  .cfg__side, .cfg__main { display: contents; }
  .cfg__h { order: 1; } .cfg__hint { order: 2; margin-bottom: 22px; } .cfg__stack { order: 3; } .cfg__list { order: 4; margin-top: 34px; } .cfg__clear { order: 5; align-self: flex-start; } .cfg__act { order: 6; }
  .cfg__empty { font-size: 19px; max-width: 86%; }
  .cfg__tb > span:nth-child(2) { display: none; }
  .cfg__tb > span { padding: 8px 12px 9px; }
  .cfg__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 0; }
  .cfg__list li { border-bottom: 1px solid var(--line); }
  .cfg__item { grid-template-columns: 22px minmax(0, 1fr); gap: 11px; min-height: 56px; padding: 8px 2px; }
  .cfg__item i { display: none; }
  .cfg__item input { inset-inline-start: 2px; }
  .cfg__item b { font-size: 14.5px; }
  .cfg__act { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .cfg__act .btn { justify-content: center; margin-inline-start: 0; white-space: normal; }
  .cfg__act .cfg__msg { flex: none; }
  .wo__msg { display: block; }
  .wo__fields { grid-template-columns: 1fr; margin-top: 36px; gap: 30px; }
  .wo__foot { flex-direction: column; align-items: stretch; margin-top: 34px; }
  .wo__foot .btn { justify-content: center; }
  .wo__ok { margin-top: 34px; }
}
@media (max-width: 600px) {
  .man__steps { grid-template-columns: 1fr; }
  .cfg__board.is-empty { min-height: 300px; }
  /* phones: the manual drawings at ~70% of their tablet size, the parts callout a size smaller */
  .man__fig { max-width: 244px; margin-bottom: 18px; }
  .man__parts { gap: 7px; padding: 4px 8px 4px 6px; border-radius: 8px; }
  .man__part b { font-size: 12px; }
  .man__part svg { width: 22px; height: 18px; }
  .wo { padding: 22px 18px 26px; }
  .wo::before { inset: 6px; }
  .cfg__item b { font-size: 14px; }
}
/* phones: one service per row (long names such as "3D-моделирование" or "Personalzeiterfassung" no longer break) */
@media (max-width: 420px) {
  .cfg__list { grid-template-columns: 1fr; }
  .cfg__item { min-height: 50px; }
}
:root[lang="de"] .cfg__item b, :root[lang="de"] .chip-g { hyphens: auto; overflow-wrap: anywhere; }

/* ==========================================================================
   Without JavaScript: the register of services stays a working checklist; the drawing board, the build
   action and the picks summary (all script-driven) step aside.
   ========================================================================== */
:root:not(.js) .cfg__main, :root:not(.js) .cfg__clear, :root:not(.js) .wo__picked { display: none; }
:root:not(.js) .cfg__side { grid-column: 1 / -1; }
.cfg__item input:checked + .cfg__box:empty::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--signal); }

/* ==========================================================================
   Motion preferences / still screenshots
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .man__sk .dr, .g-sk .dr, .man__fig, .man__ink, .man__sk, .man__seam, .man__seam::before, .man__seam::after { transition: none !important; }
  .logo__line path { transition: none !important; }
  .thread__ring { transition: none; }
}

/* spam trap (contact.php): off-screen, never focusable, never read out */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }


/* WebKit: see style.css (WebKit #rough fallback) */
.wk .man__sk, .wk .cfg__cell .g-sk, .wk .cfg__ghost svg { filter: none; }