/* ==========================================================================
   TURALON — "Atölye / Fikirden ürüne"
   Palette
     paper  #F1ECE2  the drawing sheet (warm, never pure white)
     ink    #1C1A17  graphite-black for the finished layer
     pencil #3C64A8  the draughtsman's blue pencil (sketch layer)
     signal #C8401A  vermilion — the build head, calls to action (signal-2 is the same hue lifted for dark grounds)
     ok     #3A8A5F  the ONE status green ("in sync", "on site", "done") — status only, never decoration
     wash   #D5DDE8  pencil wash, a backdrop tint for mock screens
   Nothing else. Mock products and avatars use ink / pencil tints.
   Type
     Geologica (Latin/Cyrillic) · Alexandria (Arabic) — display + text
     Literata italic, opsz 72 · Markazi Text (Arabic) — the second voice: one line per sheet + the process opener
     JetBrains Mono — measurements, labels
     Shantell Sans italic · Aref Ruqaa (Arabic) — the blue-pencil hand in the sketch layer
   Calm rules
     Grid paper and rulers live only inside the hero frame and the sheet frames; everything else is quiet paper.
     At most one ambient loop per screen, and only while it is in view.
   ========================================================================== */

:root {
  --paper: #F1ECE2;
  --paper-2: #E8E1D3;
  --paper-3: #DDD4C3;
  --card: #FFFCF6;
  --ink: #1C1A17;
  --ink-2: #4B463E;
  --ink-3: #6F685D;
  --pencil: #3C64A8;
  --pencil-soft: rgba(60, 100, 168, .28);
  --pencil-faint: rgba(60, 100, 168, .12);
  --signal: #C8401A;
  --signal-2: #E2582C;
  --signal-ink: #A8340F; /* vermilion for small text on paper (AA 5.6:1) */
  --ok: #3A8A5F;
  --ok-soft: #DCEBE1;
  --wash: #D5DDE8;
  --night: #1A1815;
  --night-2: #24211D;
  --line: rgba(28, 26, 23, .14);

  --f-display: "Geologica", system-ui, sans-serif;
  --f-body: "Geologica", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Shantell Sans", "Segoe Print", cursive;
  --hand-style: italic;
  --hand-w: 380;
  --f-voice: "Literata", Georgia, serif;
  --voice-style: italic;
  --voice-w: 400; /* 7-to-70: the light 340 italic was faint for older readers (jury D #3) */
  --track-mono: .08em;
  --track-tight: -.035em;

  /* rhythm: generous quiet paper between sections (Çizgi's spacing discipline) */
  /* polish B11/A10: a little tighter (the page was ~15 screens on desktop, ~21 on a phone) */
  /* rhythm round (juries C #3, D #5): capped so a 7-to-70 reader does not feel the scroll; phones get their own values below */
  --sec: clamp(96px, 10vw, 160px);
  --sec-s: clamp(56px, 6vw, 96px);
  --sheet-gap: clamp(72px, 6vw, 96px);  /* between two sheets of the set: one breath, the thread crosses it in one curve */

  /* herofix: viewport-fit=cover (index.html) lets the page run under a phone's notch / rounded corners in landscape;
     every gutter keeps clear of them (env() is 0 everywhere else) */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gut: max(clamp(16px, 4vw, 56px), var(--safe-x));
  --maxw: 1320px;
  --hdr: 68px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --d: 1;
}
:root[dir="rtl"] { --d: -1; }
:root[lang="ar"] {
  --f-display: "Alexandria", "Geologica", system-ui, sans-serif;
  --f-body: "Alexandria", system-ui, sans-serif;
  --f-mono: "Alexandria", system-ui, sans-serif;
  --f-hand: "Aref Ruqaa", "Alexandria", serif;
  --hand-style: normal;
  --hand-w: 400;
  --f-voice: "Markazi Text", "Alexandria", serif;
  --voice-style: normal;
  --voice-w: 500;
  --track-mono: 0;
  --track-tight: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); }
body {
  margin: 0; color: var(--ink); background-color: var(--paper);
  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 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  font: 400 17px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--signal); color: #fff; }
.defs { position: absolute; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: calc(100% - 2 * max(clamp(10px, 1.6vw, 24px), var(--safe-x))); margin-inline: auto; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: var(--track-mono); text-transform: uppercase; font-weight: 400; }
:root[lang="ar"] .mono { text-transform: none; font-size: 13px; }
.hand { font-family: var(--f-hand); font-style: var(--hand-style); font-weight: var(--hand-w); }
/* the second voice */
.voice { font-family: var(--f-voice); font-style: var(--voice-style); font-weight: var(--voice-w); font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
:root[lang="ar"] .voice { letter-spacing: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

/* ---------- grid paper ---------- */
.grid-paper, .is-sketch {
  background-color: #F4F0E7;
  background-image:
    linear-gradient(var(--pencil-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--pencil-faint) 1px, transparent 1px),
    linear-gradient(rgba(60,100,168,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,100,168,.2) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
  background-position: -1px -1px;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: .7em; min-height: 52px; padding: 0 1.4em;
  background: var(--bg); color: var(--fg); text-decoration: none; border: 1.5px solid var(--bg);
  font: 500 16px/1.1 var(--f-body); letter-spacing: -.005em; border-radius: 999px; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--signal); z-index: -1; transform: scaleX(0); transform-origin: var(--from, left); transition: transform .45s var(--ease); }
:root[dir="rtl"] .btn::before { --from: right; }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { border-color: var(--signal); color: #fff; }
.btn:active { transform: scale(.98); }
.btn__arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
:root[dir="rtl"] .btn__arr { transform: scaleX(-1); }
.btn:hover .btn__arr { transform: translateX(4px); }
:root[dir="rtl"] .btn:hover .btn__arr { transform: scaleX(-1) translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--light { --bg: var(--paper); --fg: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: 14px; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: grid; place-items: center; pointer-events: none; }
.loader__in { display: grid; justify-items: center; gap: 18px; }
.loader__mark { width: 92px; height: 92px; }
/* the loading moment is over in ~0.8 s (polish B10) */
.lm-sk { stroke-dashoffset: 0; animation: lmDraw .75s var(--ease) both; }
.lm-ink { transform-origin: 60px 60px; animation: lmInk .45s .3s var(--ease) both; }
.lm-axis { stroke-dasharray: 240; animation: lmAxis .7s var(--ease) both; }
.loader__word { font: 700 15px var(--f-display); letter-spacing: .32em; padding-inline-start: .32em; animation: lmWord .45s .25s var(--ease) both; }
@keyframes lmDraw { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 6 5; } }
@keyframes lmInk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lmAxis { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes lmWord { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.loader.is-out { animation: loaderOut .7s var(--ease) forwards; }
@keyframes loaderOut { to { clip-path: inset(0 0 100% 0); } }
.is-still .loader, .no-intro .loader { display: none; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: rgba(241, 236, 226, .9); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s; }
/* scrolled: almost opaque paper, so the page behind never shows through as a muddy ghost (polish B13) */
.hdr.is-scrolled { border-bottom-color: var(--line); background: rgba(241, 236, 226, .97); backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.logo__t { display: inline-flex; align-items: center; font: 800 21px/1 "Geologica", sans-serif; letter-spacing: .055em; direction: ltr; }
.logo__o { --mk-w: 4.2; --mk-dash: 4.2 3.4; width: .78em; height: .78em; margin-inline: .045em; color: var(--ink); transition: transform .6s var(--ease); }
.logo:hover .logo__o { transform: rotate(180deg); }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { position: relative; text-decoration: none; padding: 8px 12px; font-size: 15px; color: var(--ink-2); transition: color .25s; }
.nav a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 3px; height: 1.5px; background: var(--signal); transform: scaleX(0); transform-origin: var(--o, left); transition: transform .35s var(--ease); }
:root[dir="rtl"] .nav a::after { --o: right; }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.hdr__end { display: flex; align-items: center; gap: 18px; }
.lang { position: relative; display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; direction: ltr; }
.lang button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 500 11.5px/1 var(--f-mono, monospace); font-family: "JetBrains Mono", monospace; letter-spacing: .06em; min-height: 34px; padding: 8px 9px; border-radius: 999px; color: var(--ink-2); transition: color .25s; }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--paper); }
.lang__bar { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }
.burger { display: none; align-items: center; gap: 10px; border: 1px solid var(--ink); border-radius: 999px; background: none; height: 40px; padding: 0 14px; cursor: pointer; font-size: 14px; }
.burger__l { width: 16px; height: 8px; border-block: 1.5px solid currentColor; transition: transform .3s; }
.burger[aria-expanded="true"] .burger__l { transform: scaleY(.2) ; }

.menu { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: var(--paper); overflow: auto; }
.menu[hidden] { display: none; }
.menu__in { padding-block: 28px calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 40px; }
.menu__nav { display: grid; border-top: 1px solid var(--line); }
.menu__nav a { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 34px/1.1 var(--f-display); letter-spacing: var(--track-tight); }
.menu__nav i { font: 400 12px var(--f-mono); color: var(--pencil); font-style: normal; }
.menu.is-open .menu__nav a { animation: menuIn .5s var(--ease) both; }
.menu.is-open .menu__nav a:nth-child(2) { animation-delay: .05s; } .menu.is-open .menu__nav a:nth-child(3) { animation-delay: .1s; } .menu.is-open .menu__nav a:nth-child(4) { animation-delay: .15s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(14px); } }
.menu__lang .mono { margin: 0 0 12px; color: var(--ink-3); }
.lang--big { flex-wrap: wrap; border: 0; padding: 0; gap: 8px; }
.lang--big button { font: 500 16px/1 var(--f-body); letter-spacing: 0; padding: 14px 18px; border: 1px solid var(--line); color: var(--ink); }
.lang--big button[lang="ar"] { font-family: "Alexandria", sans-serif; }
.lang--big button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ==========================================================================
   DUO — the sketch | product reveal (shared by hero + every service)
   Product is visible on the start side of the seam, the sketch beyond it.
   Pure transforms: outer pane slides, inner content slides back.
   ========================================================================== */
.duo { --s: .5; position: relative; isolation: isolate; }
.duo__pane { overflow: hidden; }
.duo__product { transform: translateX(calc((var(--s) - 1) * 100% * var(--d))); }
.duo__product > .duo__in { transform: translateX(calc((1 - var(--s)) * 100% * var(--d))); }
.duo__sketch { position: absolute; inset: 0; transform: translateX(calc(var(--s) * 100% * var(--d))); }
.duo__sketch > .duo__in { height: 100%; transform: translateX(calc(var(--s) * -100% * var(--d))); }
.duo__pane, .duo__in { will-change: transform; }

.seam { position: absolute; z-index: 5; top: 0; bottom: 0; inset-inline-start: calc(var(--s) * 100%); width: 0; touch-action: pan-y; outline: none; }
/* touch: a 44px grab strip along the line (vertical swipes still scroll the page) + a 64px target round the knob */
.seam::before { content: ""; position: absolute; top: var(--seam-t, 0px); bottom: var(--seam-b, 0px); left: -22px; width: 44px; cursor: ew-resize; touch-action: pan-y; }
.seam__knob { touch-action: none; }
.seam__knob::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.seam__line { position: absolute; top: var(--seam-t, 0px); bottom: var(--seam-b, 0px); inset-inline-start: -.75px; width: 1.5px; background: var(--signal); }
/* hero, stacked layouts: the seam's second run, over the drawing strip of the set (heroClip sets --seg-t / --seg-h) */
.seam__seg { position: absolute; top: var(--seg-t, 0px); height: var(--seg-h, 0px); inset-inline-start: -.75px; width: 1.5px; background: var(--signal); pointer-events: none; opacity: var(--seg-on, 0); }
.seam__line::before, .seam__line::after, .seam__seg::before, .seam__seg::after { content: ""; position: absolute; left: -4px; width: 9.5px; height: 1.5px; background: var(--signal); }
.seam__line::before, .seam__seg::before { top: 0; } .seam__line::after, .seam__seg::after { bottom: 0; }
.seam__knob { position: absolute; top: var(--knob-y, 50%); inset-inline-start: -22px; margin-inline-start: var(--knob-dx, 0px); width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 6px 18px -6px rgba(140, 40, 10, .55), 0 0 0 5px rgba(200, 64, 26, .12); transition: transform .3s var(--ease), box-shadow .3s; }
.seam__knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seam:hover .seam__knob, .seam.is-drag .seam__knob { transform: scale(1.08); box-shadow: 0 8px 22px -6px rgba(140, 40, 10, .6), 0 0 0 9px rgba(200, 64, 26, .14); }
.seam:focus-visible .seam__knob { outline: 2px solid var(--ink); outline-offset: 4px; }
/* the two labels sit level with the knob, one on each side, so they never meet what lies under the headline */
.seam__tag { position: absolute; top: var(--knob-y, 50%); transform: translateY(-50%); white-space: nowrap; font-size: 11px; padding: 3px 7px; border-radius: 3px; pointer-events: none; }
.seam__tag--p { inset-inline-end: 34px; background: var(--ink); color: var(--paper); }
.seam__tag--s { inset-inline-start: 34px; color: var(--pencil); font-family: var(--f-hand); font-style: var(--hand-style); font-weight: var(--hand-w); font-size: 15px; text-transform: none; letter-spacing: 0; padding: 0 4px; line-height: 1.2; background: #F4F0E7; }
.duo--stage .seam__tag, .lampstage .seam__tag { display: none; }
/* (the hero's "drag me" affordance is the seam itself leaning ±28px once after the intro: app.js nudgeSeam) */

/* ---------- the sketch treatment: same markup, drawn in blue pencil ---------- */
.is-sketch { color: var(--pencil); }
.is-sketch * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--pencil) !important; border-color: var(--pencil) !important; animation: none !important; transition: none !important; }
.is-sketch .mock, .hero__sk .hero__h, .hero__sk .set__sheet { filter: url(#rough); }
.is-sketch .k { border: 1.5px solid var(--pencil) !important; }
.is-sketch *::before, .is-sketch *::after { background: transparent !important; box-shadow: none !important; outline: 1.2px solid rgba(60,100,168,.8); outline-offset: -1.2px; border-color: var(--pencil) !important; }
.is-sketch .kd { border: 1.5px dashed var(--pencil) !important; }
.is-sketch .f { background: repeating-linear-gradient(-50deg, rgba(60,100,168,.55) 0 1px, transparent 1px 5px) !important; }
.is-sketch .t { color: transparent !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5c5-3 5 3 10 0s5-3 10 0 5 3 10 0 5-3 10 0' fill='none' stroke='%233C64A8' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x 0 55% / auto .62em !important; border-radius: 0 !important; }
.is-sketch svg, .is-sketch svg * { fill: none !important; stroke: var(--pencil) !important; }
.is-sketch svg * { stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.is-sketch svg .nofill-sk { stroke: none !important; }
.is-sketch .x { position: relative; border: 1.5px solid var(--pencil) !important; }
.is-sketch .x::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .7px), var(--pencil) 50%, transparent calc(50% + .7px)), linear-gradient(to top left, transparent calc(50% - .7px), var(--pencil) 50%, transparent calc(50% + .7px)) !important; }
.is-sketch .x > * { visibility: hidden; }
.is-sketch .p-only { visibility: hidden !important; }
.s-only { display: none; }
.is-sketch .s-only { display: block; }
.is-sketch a, .is-sketch .btn { pointer-events: auto; }
.is-sketch .btn::before { display: none; }
.is-sketch .btn { border: 1.5px solid var(--pencil) !important; }

/* margin notes inside the sketch layer */
.note { position: absolute; z-index: 3; font-family: var(--f-hand); font-style: var(--hand-style); font-weight: var(--hand-w); font-size: 1.16em; line-height: 1.2; letter-spacing: -.01em; color: var(--pencil); max-width: 13em; }
:root[lang="ar"] .note { font-size: 1.4em; line-height: 1.35; }
.note svg { position: absolute; overflow: visible; }
/* pencil notes live in the end ~40% of a frame, beyond where the seam rests, so none is ever cut mid-word
   ("…opyala", "ntaj ve mesai raporu"; polish A4, DE/AR editors) */
.duo--stage .is-sketch .note { max-width: 36% !important; white-space: normal !important; }
.note svg path { fill: none; stroke: var(--pencil); stroke-width: 1.4; stroke-linecap: round; }

/* ==========================================================================
   HERO — a drawing sheet
   ========================================================================== */
.hero { padding-block: 10px 0; }
.sheet { --padT: clamp(48px, 5.4vw, 78px); --padX: clamp(24px, 5.4vw, 86px); position: relative; border: 1.5px solid var(--ink); padding: 0; background-color: var(--paper); min-height: clamp(620px, calc(100svh - var(--hdr) - 10px - env(safe-area-inset-bottom, 0px)), 960px); display: flex; flex-direction: column; overflow: hidden; }
.sheet::before { content: ""; position: absolute; z-index: 5; inset: 7px; border: 1px solid var(--line); pointer-events: none; }
.ruler { position: absolute; z-index: 7; pointer-events: none; color: var(--ink-3); }
.ruler--x { top: 7px; inset-inline: 7px; height: 18px; border-bottom: 1px solid var(--line);
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(90deg, rgba(28,26,23,.3) 1px, transparent 1px);
  background-size: 8px 6px, 80px 12px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.ruler--y { top: 7px; bottom: 7px; inset-inline-start: 7px; width: 18px; border-inline-end: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(rgba(28,26,23,.3) 1px, transparent 1px);
  background-size: 6px 8px, 12px 80px; background-repeat: repeat-y; background-position: 100% 0, 100% 0; }
:root[dir="rtl"] .ruler--y { background-position: 0 0, 0 0; }
.ruler span { position: absolute; font: 400 10px/1 var(--f-mono); font-family: "JetBrains Mono", monospace; letter-spacing: 0; color: var(--ink-3); }
.ruler--x span { top: 2px; transform: translateX(3px); }
.ruler--y span { inset-inline-start: 2px; transform: translateY(3px); }
.xhair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 4; }
.sheet:hover .xhair { opacity: 1; }
.xhair__h, .xhair__v { position: absolute; background: var(--pencil-soft); }
.xhair__h { left: 0; right: 0; height: 1px; top: 0; }
.xhair__v { top: 0; bottom: 0; width: 1px; left: 0; }
.xhair__read { position: absolute; left: 0; top: 0; font: 400 10px/1 "JetBrains Mono", monospace; color: var(--pencil); background: var(--paper); padding: 3px 5px; border: 1px solid var(--pencil-soft); white-space: nowrap; }

.hero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2.4vw, 34px); color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(200, 64, 26, .14); }

/* the hero duo: product layer in flow, pencil layer on top, clipped by heroClip() in app.js */
.duo--hero { flex: 1; display: flex; flex-direction: column; --knob-y: 52%; }
.hero__prod { flex: 1; display: flex; flex-direction: column; padding: var(--padT) var(--padX) 0; }
.hero__sk .dot { background: none; box-shadow: none; border: 1.2px solid var(--pencil); }
.hero__sk { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; pointer-events: none; background-color: #F4F0E7; clip-path: inset(0 0 0 100%); }
.hero__sk > .hero__prod { flex: 1; }
.hero__sk .hero__copy { visibility: hidden; }
/* herofix: the zone's construction edges. heroClip() keeps the zone inside the inner frame line; where the zone starts
   between two headline lines (--zone-te) and where the stacked headline band ends above the copy (--zone-be) its edge is a
   dashed pencil construction line, so it reads as a drawing area laid out on the sheet, not a pasted rectangle.
   Values written once per measure by measureHero() (never per seam frame). */
.hero__sk::after { content: ""; position: absolute; z-index: 1; inset-inline: 0; top: var(--zone-t, 0px); bottom: var(--zone-b, 0px); pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(60,100,168,.7) 0 7px, transparent 7px 12px) 0 0 / 100% var(--zone-te, 0px) no-repeat,
    repeating-linear-gradient(90deg, rgba(60,100,168,.7) 0 7px, transparent 7px 12px) 0 100% / 100% var(--zone-be, 0px) no-repeat; }
.duo--hero > .seam { z-index: 6; }

.hero__h { margin: 0; font: 650 clamp(46px, 7.1vw, 118px)/.98 var(--f-display); letter-spacing: -.045em; color: var(--ink); max-width: 15ch; padding-block-end: .06em; }
:root[lang="en"] .hero__h { font-size: clamp(40px, 5.2vw, 90px); max-width: 21ch; }
:root[lang="de"] .hero__h { font-size: clamp(42px, 6.8vw, 108px); max-width: 18ch; }
:root[lang="ru"] .hero__h { font-size: clamp(40px, 5.8vw, 96px); max-width: 17ch; letter-spacing: -.04em; }
:root[lang="ar"] .hero__h { font-weight: 700; font-size: clamp(42px, 7vw, 112px); line-height: 1.22; letter-spacing: 0; max-width: 24ch; }
.hero__h .ln { display: block; }
.hero__h .pt, .has-pt .pt { color: var(--signal); }
.close__h .pt { color: var(--signal-2); }
.hero__h .hi { position: relative; white-space: nowrap; }
/* the last two words stay on one line, so the resting seam always finds a word gap on the last line */
.hero__h .nw { white-space: nowrap; }
.hero__h.nw-off .nw { white-space: normal; }
.hero__h .hi::after { content: ""; position: absolute; inset-inline: .02em; bottom: -.04em; height: .055em; background: var(--signal); transform-origin: var(--o, left); transform: scaleX(var(--u, 1)); transition: transform 1s var(--ease); border-radius: 2px; }
:root[dir="rtl"] .hero__h .hi::after { --o: right; }
/* pencil headline: outline letters on typographic construction lines */
.hero__sk .hero__h { color: transparent !important; -webkit-text-stroke: 1.15px var(--pencil);
  background-image: linear-gradient(transparent calc(100% - 1px), var(--pencil-soft) calc(100% - 1px)) !important;
  background-size: 100% .98em !important; background-position: 0 -.2em !important; }
:root[lang="ar"] .hero__sk .hero__h { background-size: 100% 1.22em !important; background-position: 0 -.3em !important; }
.hero__sk .hero__h .pt, .hero__sk .hero__h * { color: transparent !important; }
/* joined Arabic letters drawn as outlines show their internal contours and overlaps (looks like a broken font):
   the Arabic pencil headline is a soft pencil fill instead (polish A7) */
:root[lang="ar"] .hero__sk .hero__h, :root[lang="ar"] .hero__sk .hero__h * { -webkit-text-stroke: 0; color: rgba(60, 100, 168, .5) !important; }
:root[lang="ar"] .seam__tag--s { font-size: 19px; line-height: 1.5; padding: 0 6px; }
.hero__sk .hero__h .hi::after { background: none !important; border-bottom: 1.5px dashed var(--pencil); height: 0; outline: 0 !important; }

/* dimension line under the headline (pencil layer only), value set by measureHero() */
.dimh { position: absolute; z-index: 2; height: 11px; border-inline: 1px solid var(--pencil); }
.dimh i { position: absolute; inset-inline: 0; top: 5px; border-top: 1px solid var(--pencil); }
.dimh__v { position: absolute; right: 14px; bottom: 9px; font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--pencil); white-space: nowrap; direction: ltr; }
/* the value sits at the pencil end of the line: physical left in Arabic (it was clipped away on the product side) */
:root[dir="rtl"] .dimh__v { right: auto; left: 14px; }

.hero__low { position: relative; display: flex; align-items: flex-end; margin-top: auto; min-height: calc(var(--set-h, 270px) + clamp(28px, 3vw, 44px) + clamp(26px, 2.6vw, 40px)); padding-block: clamp(28px, 3vw, 44px) clamp(26px, 2.6vw, 40px); }
.hero__copy { max-width: 30em; position: relative; }
.hero__sub { margin: 0 0 26px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero object: the drawing set. Nine index tabs on the start edge of a front sheet. The sheet is a drawing panel
   (at rest the seam crosses it: pencil on one side, finished on the other) and a printed label panel (number, name,
   line) that heroClip() cuts out of the pencil layer, so it always reads solid. Sans only: no second voice, no
   pencil hand inside this small card. */
.set { position: absolute; bottom: clamp(26px, 2.6vw, 40px); inset-inline-start: var(--set-x, 52%); width: clamp(390px, 30vw, 440px); padding-inline: 30px 14px; isolation: isolate; }
.set__tabs { position: absolute; z-index: -1; inset-inline-start: 0; top: 8px; display: flex; flex-direction: column; gap: 3px; }
.set__tab { width: 36px; height: 22px; display: flex; align-items: center; padding-inline-start: 7px; text-decoration: none; font: 500 11px/1 "JetBrains Mono", monospace; color: var(--ink-2); background: var(--paper-2); border: 1px solid rgba(28,26,23,.3); border-inline-end: 0; border-start-start-radius: 5px; border-end-start-radius: 5px; transform: translateX(calc(5px * var(--d))); transition: transform .35s var(--ease), background-color .25s, color .25s; }
.set__tab:hover, .set__tab:focus-visible { transform: none; color: var(--ink); background: var(--card); }
.set__tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: none; }
.set__sheet { position: relative; display: grid; grid-template-columns: 50% 50%; height: 220px; background: var(--card); border: 1.5px solid var(--ink); text-decoration: none; color: var(--ink); box-shadow: 0 34px 50px -36px rgba(40, 30, 20, .5); }
.set__art { min-width: 0; min-height: 0; padding: 16px 12px; display: grid; place-items: center; }
.set__art svg { width: 100%; height: 100%; max-height: 170px; overflow: visible; transform: scale(1.12); }
.set .g-sk .s, .set .g-sk .w, .set .g-sk .vh { opacity: .8; }
.hero__sk .set__art svg { filter: url(#rough); }
.set__lab { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 18px 20px 16px; border-inline-start: 1px solid rgba(28,26,23,.24); }
.set__top { display: flex; align-items: baseline; gap: 8px; }
.set__no { font: 650 44px/.9 "Geologica", sans-serif; letter-spacing: -.04em; direction: ltr; }
.set__of { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.set__name { margin-top: 14px; font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set__one { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root[lang="ar"] .set__name { font-size: 16px; line-height: 1.45; }
:root[lang="ar"] .set__one { font-size: 14.5px; line-height: 1.6; }
:root[lang="de"] .set__name { hyphens: auto; }
.set__arr { margin-top: auto; align-self: flex-end; width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(var(--d)); transition: transform .35s var(--ease), stroke .25s; }
.set__sheet:hover .set__arr, .set__sheet:focus-visible .set__arr { stroke: var(--signal); transform: scaleX(var(--d)) translateX(3px); }
.set__sheet:hover .set__name { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.set__sheet.sw .set__art, .set__sheet.sw .set__top, .set__sheet.sw .set__name, .set__sheet.sw .set__one { animation: setIn .55s var(--ease) both; }
.set__sheet.sw .set__art { animation-delay: .06s; }
@keyframes setIn { from { opacity: 0; transform: translateY(5px); } }
/* two paper sheets behind the front one */
.set__sheet::before, .set__sheet::after { content: ""; position: absolute; inset: -1.5px; border: 1px solid rgba(28,26,23,.32); background: var(--paper); z-index: -1; }
.set__sheet::before { transform: translate(calc(7px * var(--d)), 7px); }
.set__sheet::after { transform: translate(calc(14px * var(--d)), 14px); z-index: -2; }
.set-off .set { visibility: hidden; }
.hero__sk .set__tab { transform: translateX(calc(5px * var(--d))); }
.hero__sk .set__tab.on { background: repeating-linear-gradient(-50deg, rgba(60,100,168,.5) 0 1px, transparent 1px 5px) !important; }

.titleblock { position: relative; z-index: 6; display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--ink); background: var(--paper); }
.titleblock > * { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; border-inline-end: 1px solid var(--line); font-size: 11px; text-decoration: none; }
.titleblock > :first-child { padding-inline-start: 36px; }
.titleblock b { font-weight: 400; color: var(--ink-3); }
.titleblock em { font-style: normal; color: var(--ink); font-weight: 600; }
.titleblock__scroll { margin-inline-start: auto; flex-direction: row !important; align-items: center; gap: 10px !important; border-inline-end: 0 !important; color: var(--ink); }
.titleblock__scroll svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.titleblock__scroll:hover svg { transform: translateY(3px); }

/* ==========================================================================
   SECTIONS — each one opens in its own way; between them, quiet paper
   ========================================================================== */
/* services opener: headline · second-voice lede · the drawing register (pafta listesi) */
.services { padding-top: var(--sec); }
.reg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(40px, 4.4vw, 64px); align-items: end; }
.reg__h { grid-column: 1 / span 7; margin: 0; font: 600 clamp(38px, 4.8vw, 76px)/1.02 var(--f-display); letter-spacing: -.038em; text-wrap: balance; }
:root[lang="ar"] .reg__h { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
/* the services lede is plain text in the sans (the italic second voice is kept for the sheet lines and the process opener) */
.reg__lede { grid-column: 9 / span 4; margin: 0 0 .25em; font: 400 clamp(19px, 1.4vw, 20px)/1.55 var(--f-body); color: var(--ink-2); }
:root[lang="ar"] .reg__lede { line-height: 1.75; }
.reg__table { grid-column: 1 / -1; }
.reg__th { display: flex; justify-content: space-between; margin: 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); color: var(--ink-3); font-size: 11px; }
.bom { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bom li { border-bottom: 1px solid var(--line); }
.bom li:nth-child(3n+1), .bom li:nth-child(3n+2) { border-inline-end: 1px solid var(--line); }
.bom a { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 17px 18px 17px 0; text-decoration: none; transition: background-color .3s; }
.bom li:nth-child(3n+2) a, .bom li:nth-child(3n) a { padding-inline-start: 18px; }
.bom a:hover { background: rgba(28,26,23,.035); }
.bom i { font: 400 11px "JetBrains Mono", monospace; color: var(--pencil); font-style: normal; }
.bom b { font-weight: 500; font-size: 16.5px; letter-spacing: -.01em; }
.bom svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; transition: transform .35s var(--ease), stroke .3s; }
.bom a:hover svg { transform: translateY(3px); stroke: var(--signal); }

/* ---------- a service sheet ---------- */
/* rhythm: the first sheet starts right under the register (no thread-only band), sheets one breath apart.
   overflow-x: clip lets the game sheet bleed to the window edge without ever making the page scroll sideways */
.sheets { padding-block: clamp(44px, 4.4vw, 64px) 0; display: grid; gap: var(--sheet-gap); overflow-x: clip; }
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.svc__text { grid-column: 1 / span 4; grid-row: 1; }
.svc .stage { grid-column: 6 / span 7; grid-row: 1; }
.svc--flip .svc__text { grid-column: 9 / span 4; }
.svc--flip .stage { grid-column: 1 / span 7; }
.svc__no { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--pencil); }
.svc__no b { font-weight: 600; color: var(--ink); }
.svc__no::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.svc__name { margin: 0 0 10px; font: 600 17px/1.3 var(--f-body); color: var(--ink); letter-spacing: -.005em; }
.svc__one { margin: 0 0 22px; font-size: clamp(30px, 2.8vw, 43px); line-height: 1.08; color: var(--ink); text-wrap: balance; }
/* no short word left hanging at a line end (RU editor) */
.svc__desc, .hero__sub, .reg__lede, .gn__list p, .close__lede, .man__text, .cfg__hint { text-wrap: pretty; }
/* Arabic second voice: Markazi Text (a Naskh) set larger than the Alexandria sans, so the two voices stay distinct in RTL */
:root[lang="ar"] .svc__one { line-height: 1.3; font-size: clamp(35px, 3.4vw, 52px); }
.svc__desc { margin: 0 0 24px; color: var(--ink-2); font-size: 17px; }
.svc__ex { border-top: 1px solid var(--line); padding-top: 14px; }
.svc__ex p { margin: 0 0 8px; color: var(--ink-3); font-size: 11px; }
.svc__ex ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.svc__ex li { display: flex; gap: 10px; font-size: 15px; }
.svc__ex li::before { content: ""; flex: none; width: 10px; height: 0; border-top: 2px solid var(--signal); margin-top: .7em; }
.svc__exline { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.svc__exline .mono { font-size: 11px; color: var(--ink-3); margin-inline-end: .6em; }
/* the separator dot stays at the end of a line, never starts the next one */
.svc__exline .exi:not(:last-child)::after { content: "\00a0·"; }
/* phones only (≤600px, see the end of the file): the description and the third example fold into this */
.svc__more { display: none; }
.svc__more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 500 11px/1 var(--f-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-2); }
.svc__more summary::-webkit-details-marker { display: none; }
.svc__more summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.svc__plus { width: 18px; height: 18px; flex: none; border: 1px solid var(--ink-3); border-radius: 50%; padding: 3px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.svc__plus path { transition: d .3s var(--ease); }
.svc__more[open] .svc__plus path { d: path("M8 8v0M3 8h10"); }
.svc__more > p { margin: 4px 0 14px; color: var(--ink-2); font-size: 16px; }
.svc__more > ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.svc__more > ul li { display: flex; gap: 10px; font-size: 15px; }
.svc__more > ul li::before { content: ""; flex: none; width: 10px; height: 0; border-top: 2px solid var(--signal); margin-top: .7em; }

/* 04 · the automation's output, printed across the whole sheet under its drawing (wide layouts; stacked layouts keep the
   log inside the frame, .log--in). Reads like the strip of a title block: what the machine did today, line by line. */
.svc__out { display: none; }
@media (min-width: 1181px) {
  .svc--out .svc__out { position: relative; grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; margin-top: 30px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
  .svc--out .svc__out::after { content: ""; position: absolute; bottom: -8px; inset-inline-end: -8px; width: 14px; height: 14px; border: 0 solid var(--ink); border-bottom-width: 1.5px; border-inline-end-width: 1.5px; pointer-events: none; }
  .svc__outh { grid-column: 1 / span 3; margin: 0; padding: 18px 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--ink-3); }
  .svc__outh b { color: var(--ink); font-weight: 600; }
  .svc__out ol { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc__out li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-inline-start: 1px solid var(--line); font-size: 15.5px; color: var(--ink); min-width: 0; }
  .svc__out time { font: 400 12px var(--f-mono); color: var(--ink-3); }
  :root[lang="ar"] .svc__out time { font-family: "JetBrains Mono", monospace; }
  .svc__out li span { flex: 1; min-width: 0; }
  .svc__out li b { color: var(--ok); font-weight: 600; }
  /* the frame only carries the chain now: a lower drawing (2:1), the log is gone from both layers */
  .svc--out .duo--stage { aspect-ratio: 2 / 1; }
  .svc--out .log--in { display: none; }
  .svc--out .flow { gap: 4em; padding-block: 3.6em 3em; }
}

/* 05 · the game level runs off the page: the frame bleeds to the window edge on its end side (no end border, no end mark),
   its caption stays inside the column. The bleed width = the page margin on that side. */
@media (min-width: 861px) {
  .svc--bleed { --bleed: calc(var(--gut) + max(0px, (100vw - var(--maxw) - 2 * var(--gut)) / 2)); }
  .svc--bleed .stage { margin-inline-end: calc(-1 * var(--bleed)); }
  .svc--bleed .stage__frame { border-inline-end: 0; }
  .svc--bleed .stage__frame::after { display: none; }
  .svc--bleed .duo--stage { aspect-ratio: auto; height: clamp(420px, 35vw, 600px); }
  .svc--bleed .duo--stage .duo__in { font-size: max(11px, calc(100cqw / 70)); }
  .svc--bleed .stage__meta { margin-inline-end: var(--bleed); }
}

/* compact sheets: three plates side by side, drawing on top, caption below */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.svc--compact { display: flex; flex-direction: column; align-items: stretch; gap: 30px; min-width: 0; }
.svc--compact .stage { order: -1; }
.svc--compact .svc__no { margin-bottom: 14px; }
.svc--compact .svc__one { font-size: clamp(24px, 2vw, 30px); margin-bottom: 14px; }
.svc--compact .svc__desc { font-size: 15.5px; margin-bottom: 16px; }
/* the three plates share one screen: only the integration packets move, the alert ring holds still */
.svc--compact .plan .ring { animation: none; opacity: .45; transform: scale(1.9); }
.stage { position: relative; }
.stage__frame { position: relative; container-type: inline-size; border: 1.5px solid var(--ink); background: var(--paper-2); }
.stage__frame::before, .stage__frame::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--ink); border-style: solid; z-index: 7; pointer-events: none; }
.stage__frame::before { top: -8px; inset-inline-start: -8px; border-width: 0; border-top-width: 1.5px; border-inline-start-width: 1.5px; }
.stage__frame::after { bottom: -8px; inset-inline-end: -8px; border-width: 0; border-bottom-width: 1.5px; border-inline-end-width: 1.5px; }
.duo--stage { aspect-ratio: 16 / 11; overflow: hidden; }
/* rhythm round: wide frames are a touch lower (16:10), one sheet ≈ one screen at 1440×900 */
@container (min-width: 561px) { .duo--stage { aspect-ratio: 16 / 10; } }
.duo--stage > .duo__pane { position: absolute; inset: 0; }
/* mock type scale: the whole product is drawn in em of the frame width (60em wide, 16:11).
   Floor: 1em is never below 11px, and every label smaller than 1em is written max(11px, …em),
   so no text inside a mock goes under 11px at any width (jury: 8–9px labels on phones). */
.duo--stage .duo__in { position: absolute; inset: 0; font-size: max(11px, calc(100cqw / 60)); }
.stage__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--ink-3); gap: 12px; }
.stage__meta span { display: inline-flex; align-items: center; gap: 8px; }
/* Arabic: the last caption no longer starts right under the frame's corner mark (its first glyph looked cut) */
:root[dir="rtl"] .stage__meta { padding-inline: .2em .7em; }
.stage__meta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.env { overflow: hidden; }
.mock { position: absolute; inset: 0; }

/* narrow frames (phones, the trio plates): a 4:5 plate drawn on a ~31em-wide grid, so 1em ≥ 11px from a 340px frame up;
   each mock below has its own simplified narrow layout and its pencil notes re-placed (.n1/.n2) or dropped */
@container (max-width: 560px) {
  .duo--stage { aspect-ratio: 4 / 5; }
  .duo--stage .duo__in { font-size: clamp(11px, calc(100cqw / 31), 15px); }
  .duo--stage .note { white-space: normal !important; max-width: 40% !important; }
}

/* status pill shared by the mocks: the one status green */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill--ok { background: var(--ok-soft); color: #1F5A3C; }
.pill svg { width: 1em; height: 1em; flex: none; }
.pill--ok svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 01 personnel ---------- */
.env--stone { background: var(--paper-3); }
.pm { --who: 6.6em; position: absolute; inset-block: 4em 3.6em; inset-inline: 3em 12em; background: var(--card); border-radius: 1em; padding: 1.7em 1.8em; display: flex; flex-direction: column; gap: 1.2em; box-shadow: 0 2em 3em -2em rgba(40,30,20,.35); }
.pm__head { display: flex; align-items: center; gap: 1em; }
.pm__head .pm__h { margin: 0; font: 600 1.7em/1 var(--f-display); letter-spacing: -.02em; }
.pm__head small { display: block; font-size: 1em; color: var(--ink-3); margin-top: .35em; }
.pm__head .pill { margin-inline-start: auto; font-size: 1.05em; padding: .45em .9em; gap: .5em; }
.pm__chips { display: flex; gap: .6em; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .4em .8em; border-radius: 999px; background: #F1ECE2; font-size: 1em; font-weight: 500; white-space: nowrap; }
.chip i { width: .6em; height: .6em; border-radius: 50%; background: var(--ok); }
.chip--leave i { background: var(--pencil); }
.pm__axis { display: grid; grid-template-columns: var(--who) 1fr; font: 400 max(11px, .85em) "JetBrains Mono", monospace; color: var(--ink-3); }
.pm__axis div { display: flex; justify-content: space-between; direction: ltr; }
:root[dir="rtl"] .pm__axis div { direction: rtl; }
.pm__rows { display: grid; gap: .75em; flex: 1; align-content: start; position: relative; }
.pm__row { display: grid; grid-template-columns: var(--who) 1fr; align-items: center; height: 2.2em; }
.pm__who { display: flex; align-items: center; gap: .55em; font-size: 1em; font-weight: 600; min-width: 0; }
.av { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; font-size: max(11px, .82em); font-weight: 600; color: #fff; flex: none; line-height: 1; font-style: normal; }
.pm__track { position: relative; height: 1.15em; background: #F1ECE2; border-radius: 999px; }
.pm__bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--ink); }
.pm__bar--late { background: #8B847A; }
.pm__bar--plan { background: #E6DFD2; }
.pm__bar--leave { background: repeating-linear-gradient(-45deg, var(--pencil) 0 .18em, #DCE3EE .18em .55em); }
/* the "now" line sits on the same timeline as the bars (--now = share of 08:00–18:00), its time label at the foot */
.pm__now { position: absolute; top: -.6em; bottom: .2em; width: 0; inset-inline-start: calc(var(--who) + (100% - var(--who)) * var(--now, .62)); border-inline-start: 1.5px solid var(--signal); }
.pm__now b { position: absolute; bottom: -1.5em; transform: translateX(-50%); font: 600 max(11px, .8em) "JetBrains Mono", monospace; color: var(--signal); white-space: nowrap; }
:root[dir="rtl"] .pm__now b { transform: translateX(50%); }
.kiosk { position: absolute; inset-inline-end: 3.2em; top: 9.5em; width: 11.5em; height: 17em; background: var(--ink); border-radius: 1.3em; padding: 1em; display: flex; flex-direction: column; align-items: center; gap: .8em; color: var(--paper); box-shadow: 0 2em 3em -1.5em rgba(20,15,10,.55); }
.kiosk__face { width: 100%; flex: 1; border-radius: .8em; background: #2C2924; display: grid; place-items: center; position: relative; }
.kiosk__face svg { width: 62%; stroke: #C9C1B2; fill: none; stroke-width: 1.6; }
.kiosk__face::after { content: ""; position: absolute; inset: 14%; border: 1.5px solid var(--ok); border-radius: .5em; clip-path: polygon(0 0, 22% 0, 22% 3px, 0 3px, 0 22%, 0 100%, 0 78%, 0 100%, 22% 100%, 78% 100%, 100% 100%, 100% 78%, 100% 22%, 100% 0, 78% 0, 0 0); }
.kiosk__txt { display: grid; justify-items: center; gap: .25em; }
.kiosk__ok { display: flex; align-items: center; gap: .5em; font-size: 1em; font-weight: 600; }
.kiosk__ok i { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ok); display: grid; place-items: center; }
.kiosk__ok svg { width: .9em; stroke: #fff; fill: none; stroke-width: 2.6; }
.kiosk small { font: 400 max(11px, .85em) var(--f-mono); color: #A39B8E; white-space: nowrap; }
/* narrow: the board keeps its six rows (avatars only), the kiosk becomes a strip under it, never over it */
@container (max-width: 560px) {
  .pm { --who: 2.7em; inset-block: 1.4em 9.4em; inset-inline: 1.4em; padding: 1.1em 1.2em 1.4em; gap: .75em; border-radius: .9em; }
  .pm__head .pm__h { font-size: 1.5em; }
  .pm__head .pill { display: none; }
  .pm__nm { display: none; }
  .pm__rows { gap: .5em; }
  .pm__row { height: 1.95em; }
  .av { width: 1.95em; height: 1.95em; }
  .kiosk { top: auto; bottom: 1.4em; inset-inline: 1.4em; width: auto; height: 6.8em; flex-direction: row; justify-content: flex-start; padding: .8em; gap: 1.1em; border-radius: 1em; }
  .kiosk__face { height: 100%; width: 5.2em; flex: none; }
  .kiosk__txt { justify-items: start; }
  .kiosk__ok { font-size: 1.15em; }
  .svc .is-sketch .pm ~ .note { display: none; }
}
/* ---------- 02 mobile ---------- */
.env--sand { background: var(--wash); }
.phone { position: absolute; width: 19em; height: 38.5em; top: 1.4em; inset-inline-start: 15%; background: #12110F; border-radius: 3em; padding: .65em; box-shadow: 0 3em 4em -2.4em rgba(28,26,40,.5), inset 0 0 0 .15em #3a3631; }
.phone--b { inset-inline-start: auto; inset-inline-end: 15%; top: 2.2em; transform: rotate(calc(4deg * var(--d))); }
.phone__scr { width: 100%; height: 100%; border-radius: 2.4em; background: var(--card); overflow: hidden; display: flex; flex-direction: column; padding: 1.2em 1.3em 1.3em; gap: 1.1em; position: relative; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; font: 600 max(11px, .95em) var(--f-body); }
.phone__bar span:last-child { display: flex; gap: .3em; }
.phone__bar span:last-child i { width: 1.1em; height: .6em; border-radius: .15em; background: var(--ink); }
.phone__isl { position: absolute; top: .8em; left: 50%; width: 6em; height: 1.6em; border-radius: 1em; background: #12110F; transform: translateX(-50%); }
.ph__title { margin: .4em 0 0; font: 650 1.9em/1.05 var(--f-display); letter-spacing: -.025em; }
.ph__month { color: var(--ink-3); font-size: 1em; margin-top: -.6em; }
.ph__days { display: flex; gap: .45em; }
.ph__day { flex: 1; display: grid; justify-items: center; gap: .2em; padding: .55em 0; border-radius: .9em; background: #F1ECE2; font-size: max(11px, .85em); color: var(--ink-3); min-width: 0; }
.ph__day b { font-size: 1.35em; color: var(--ink); font-weight: 600; }
.ph__day.on { background: var(--ink); color: #BDB5A7; } .ph__day.on b { color: #fff; }
.ph__pic { height: 9em; border-radius: 1.1em; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; position: relative; }
.ph__pic svg { height: 88%; }
.ph__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.ph__slot { text-align: center; padding: .65em 0; border-radius: .7em; border: 1px solid #E3DBCC; font: 500 max(11px, .95em) var(--f-body); }
.ph__slot.on { background: var(--signal); border-color: var(--signal); color: #fff; }
.ph__slot.off { color: #8B847A; text-decoration: line-through; }
.ph__cta { margin-top: auto; text-align: center; padding: 1em; border-radius: 1em; background: var(--ink); color: #fff; font-weight: 600; font-size: 1.1em; }
.ph__ok { margin: auto 0 0; display: grid; justify-items: center; gap: .7em; text-align: center; }
.ph__check { width: 6.4em; height: 6.4em; border-radius: 50%; background: var(--ok-soft); display: grid; place-items: center; }
.ph__check svg { width: 3em; stroke: var(--ok); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; animation: drawchk 1.4s .4s var(--ease) both; }
.live .ph__check svg { animation-iteration-count: 1; }
@keyframes drawchk { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.ph__big { font: 650 3.4em/1 var(--f-display); letter-spacing: -.03em; }
.ph__date { color: var(--ink-3); font-size: 1.05em; }
.ph__mini { margin-top: auto; display: flex; gap: .7em; align-items: center; padding: .8em; border-radius: 1em; background: #F1ECE2; }
.ph__mini .ph__pic { height: 3.6em; width: 3.6em; border-radius: .7em; flex: none; }
.ph__mini div { flex: 1; display: grid; gap: .45em; }
.ph__mini div i { height: .6em; border-radius: .3em; background: #DCD3C4; }
.ph__mini div i:last-child { width: 60%; }
/* narrow: one phone, as tall as the plate allows, every label at full size */
@container (max-width: 560px) {
  .phone { inset-inline-start: 50%; transform: translateX(calc(-50% * var(--d))); top: 1.5em; bottom: 1.5em; height: auto; width: 20.5em; border-radius: 2.6em; }
  .phone__scr { padding: 1.1em 1.15em 1.15em; gap: .8em; border-radius: 2.1em; }
  .phone--b { display: none; }
  .ph__title { font-size: 1.65em; }
  .ph__days { gap: .35em; }
  .ph__day { padding: .45em 0; }
  .ph__day b { font-size: 1.25em; }
  .ph__pic { height: auto; flex: 1; min-height: 3em; }
  .ph__slots { gap: .4em; }
  .ph__slot { padding: .55em 0; }
  .ph__cta { padding: .85em; font-size: 1.05em; }
  .svc .is-sketch .phone ~ .note { display: none; }
}

/* ---------- 03 web ---------- */
.env--sage { background: var(--paper-3); }
.brw { position: absolute; inset: 2.8em 3em; background: var(--card); border-radius: .9em; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2.4em 3.4em -2em rgba(40,30,20,.4); }
.brw__bar { display: flex; align-items: center; gap: .5em; padding: .8em 1em; background: #ECE6DA; }
.brw__bar i { width: .8em; height: .8em; border-radius: 50%; background: #CFC6B6; }
.brw__url { margin-inline: auto; padding: .35em 1.4em; border-radius: 999px; background: var(--card); font: 400 max(11px, .9em) "JetBrains Mono", monospace; color: var(--ink-3); direction: ltr; }
.site { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 1.2em 2em 1.4em; gap: 1.1em; }
.site__nav { display: flex; align-items: center; gap: 1.6em; font-size: max(11px, .95em); }
.site__logo { display: flex; align-items: center; gap: .6em; font: 700 1.15em var(--f-display); letter-spacing: .12em; text-transform: uppercase; margin-inline-end: auto; white-space: nowrap; }
:root[lang="ar"] .site__logo { letter-spacing: 0; }
:root[dir="rtl"] .site__arr { display: inline-block; transform: scaleX(-1); }
.site__logo i { width: 1.3em; height: 1.3em; border-radius: .4em .4em .4em 0; background: var(--signal); transform: rotate(45deg); }
.site__nav span { color: var(--ink-2); }
.site__cart { width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid #DDD5C6; display: grid; place-items: center; }
.site__cart svg { width: 1.1em; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.site__hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; align-items: stretch; }
.site__copy { display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.site__k { font: 400 max(11px, .85em) "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--signal); text-transform: uppercase; }
:root[lang="ar"] .site__k { font-family: var(--f-body); letter-spacing: 0; }
.site__h { margin: 0; font: 650 3em/1 var(--f-display); letter-spacing: -.035em; }
:root[lang="ar"] .site__h { letter-spacing: 0; line-height: 1.25; }
.site__p { display: grid; gap: .5em; }
.site__p i { height: .55em; border-radius: .3em; background: #E4DDD0; }
.site__p i:nth-child(2) { width: 85%; } .site__p i:nth-child(3) { width: 60%; }
.site__btn { align-self: flex-start; padding: .8em 1.5em; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 1em; }
.site__art { min-height: 0; border-radius: .8em; background: var(--wash); display: grid; place-items: end center; overflow: hidden; position: relative; }
.site__art svg { width: 78%; height: 92%; }
.site__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.site__tile { height: 4.2em; border-radius: .7em; background: #F1ECE2; display: grid; place-items: center; }
.site__tile svg { height: 70%; }
/* narrow: a phone-width shop — logo and cart in the bar, copy over the picture, three tiles */
@container (max-width: 560px) {
  .brw { inset: 2.6em 1.4em; border-radius: .8em; }
  .brw__bar { padding: .7em .9em; }
  .brw__bar i { width: .7em; height: .7em; }
  .site { padding: 1em 1.2em 1.2em; gap: 1em; }
  .site__lnk { display: none; }
  .site__hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1em; }
  .site__copy { gap: .7em; }
  .site__art { min-height: 6em; }
  .site__h { font-size: 2.3em; }
  .site__tile { height: 3.6em; }
  .svc .is-sketch .brw ~ .n1 { top: .5em !important; inset-inline-end: 1.4em !important; }
  .svc .is-sketch .brw ~ .n2 { bottom: .5em !important; inset-inline-start: 1.4em !important; }
}

/* ---------- 04 automation ---------- */
.env--night { background: var(--night); color: var(--paper); }
.flow { position: absolute; inset: 0; padding: 4.6em 3.2em 3.4em; display: flex; flex-direction: column; justify-content: center; gap: 3.4em; }
.flow__trig { display: flex; align-items: center; gap: .8em; font: 400 1em "JetBrains Mono", monospace; color: #8F887B; }
.flow__trig i { width: 2.4em; height: 2.4em; border-radius: 50%; border: 1.5px solid #4A443B; display: grid; place-items: center; }
.flow__trig i::after { content: ""; width: .1em; height: .7em; background: #C9C1B2; transform-origin: bottom; transform: translateY(-.3em) rotate(40deg); }
.flow__trig b { color: var(--paper); font-weight: 600; font-family: var(--f-body); }
.flow__row { display: flex; align-items: center; }
.node { flex: 0 1 10.8em; min-width: 0; padding: 1.3em 1.2em; border-radius: .9em; background: var(--night-2); border: 1px solid #3A352E; display: grid; gap: .8em; position: relative; }
.node__ic { width: 2.6em; height: 2.6em; border-radius: .6em; display: grid; place-items: center; }
.node__ic svg { width: 1.5em; height: 1.5em; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.node b { font-weight: 600; font-size: 1.15em; color: var(--paper); overflow-wrap: anywhere; }
.node small { display: flex; align-items: center; gap: .4em; font: 400 max(11px, .85em) "JetBrains Mono", monospace; color: #9A9286; }
.node small i { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); }
.wire { flex: 1 1 1.6em; min-width: 1.2em; height: 2px; background: repeating-linear-gradient(90deg, #4A443B 0 .5em, transparent .5em .9em); position: relative; }
.wire::after { content: ""; position: absolute; top: 50%; width: .8em; height: .8em; margin-top: -.4em; border-radius: 50%; background: var(--signal-2); box-shadow: 0 0 0 .35em rgba(226,88,44,.18); inset-inline-start: 0; opacity: 0; animation: travel 6s linear infinite; animation-play-state: paused; }
.live .wire::after { animation-play-state: running; }
/* calm: one dot hands the job along the chain, wire by wire */
.wire:nth-of-type(2)::after { animation-delay: 2s; } .wire:nth-of-type(3)::after { animation-delay: 4s; }
@keyframes travel { 0% { inset-inline-start: 0; opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; inset-inline-start: calc(100% - .8em); } 33%, 100% { opacity: 0; inset-inline-start: calc(100% - .8em); } }
.log { background: #12110F; border-radius: .9em; padding: 1.2em 1.4em; display: grid; gap: .8em; font: 400 1em "JetBrains Mono", monospace; border: 1px solid #2E2A25; }
:root[lang="ar"] .log { font-family: var(--f-body); }
.log p { margin: 0; display: flex; gap: 1em; align-items: center; color: #CFC8BA; }
.log p time { color: #8F887B; font-family: "JetBrains Mono", monospace; }
.log p span { flex: 1; }
.log p b { color: var(--ok); font-weight: 600; }
/* narrow: the chain runs top to bottom, one row per step, the log under it */
@container (max-width: 560px) {
  .flow { padding: 3.6em 1.4em 1.6em; gap: 1.3em; justify-content: flex-start; }
  .flow__row { flex-direction: column; align-items: stretch; }
  .node { flex: none; width: auto; grid-template-columns: auto 1fr auto; align-items: center; gap: .8em; padding: .65em .9em; }
  .node__ic { width: 2.3em; height: 2.3em; }
  .node b { font-size: 1.1em; }
  .wire { flex: none; min-width: 0; height: 1.3em; width: 2px; margin-inline-start: 2.05em; background: repeating-linear-gradient(180deg, #4A443B 0 .4em, transparent .4em .7em); }
  .wire::after { left: 50%; margin-left: -.4em; inset-inline-start: auto; top: 0; animation-name: travelY; }
  .log { padding: 1em 1.1em; gap: .6em; }
  .log p { gap: .8em; }
  .svc .is-sketch .flow ~ .n1 { font-size: 1.2em !important; top: .9em !important; inset-inline-end: 1.4em !important; max-width: 40% !important; text-align: end; }
  .svc .is-sketch .flow ~ .n2 { display: none; }
}
@keyframes travelY { 0% { top: 0; opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; top: calc(100% - .8em); } 33%, 100% { opacity: 0; top: calc(100% - .8em); } }

/* ---------- 05 games: tabs, posters and states live in games/host.css ---------- */
.env--sky { background: var(--wash); }

/* ---------- 06 3D ---------- */
.svc--wide { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.svc--wide .stage { grid-column: 1 / -1; grid-row: 2; margin-top: 36px; }
/* 06 · a panorama under a one-row caption (rhythm): name + line | description | examples + link, side by side */
.svc--wide .svc__text { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.svc--wide .svc__text > .svc__no { grid-column: 1 / -1; }
.svc--wide .svc__text > .svc__name { grid-column: 1 / span 5; grid-row: 2; }
.svc--wide .svc__text > .svc__one { grid-column: 1 / span 5; grid-row: 3; margin-bottom: 0; }
.svc--wide .svc__text > .svc__desc { grid-column: 6 / span 4; grid-row: 2 / span 2; margin: 0; padding: 14px 8px 0 0; border-top: 1px solid var(--line); }
:root[dir="rtl"] .svc--wide .svc__text > .svc__desc { padding: 14px 0 0 8px; }
.svc--wide .svc__text > .svc__ex { grid-column: 10 / span 3; grid-row: 2 / span 2; }
@media (max-width: 1180px) {
  .svc--wide .svc__text > .svc__name, .svc--wide .svc__text > .svc__one { grid-column: 1 / span 6; }
  .svc--wide .svc__text > .svc__desc { grid-column: 7 / span 6; grid-row: 2 / span 2; }
  .svc--wide .svc__text > .svc__ex { grid-column: 7 / span 6; grid-row: 4; margin-top: 18px; }
}
.svc--wide .duo--stage { aspect-ratio: 16 / 6.8; }
.lampstage { position: relative; aspect-ratio: 16 / 6.8; overflow: hidden; touch-action: pan-y; cursor: grab; background-color: #F4F0E7; }
.lampstage.is-grab { cursor: grabbing; }
.lampstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lampstage .seam { --knob-y: 50%; }
/* the lamp poster: drawn lamp, lit (product pane) and pencilled (sketch pane); the seam works on it too.
   Shown until lamp.js has drawn a frame (.gl-ok), kept for good on .gl-off (no three.js / WebGL / first frame). */
.lamp-poster { position: absolute; inset: 0; overflow: hidden; }
.lamp-poster--p { background: radial-gradient(120% 90% at 55% 30%, #2A2621 0%, var(--night) 60%); }
.lamp-poster svg { position: absolute; inset: 11% 8% 7%; width: 84%; height: 82%; overflow: visible; }
:root[dir="rtl"] .lamp-poster svg { transform: scaleX(-1); }
@container (max-width: 560px) {
  /* tall plate: the lamp fills the plate's start side, its beam runs off the far edge */
  .lamp-poster svg { inset: 19% auto auto auto; inset-inline-start: -1%; width: 120%; height: 62%; }
}
.lampstage.gl-ok .lamp-poster { display: none; }
.lampstage.gl-off { cursor: default; }
.svc--3d:has(.gl-off) .stage__meta span:last-child { display: none; }
.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; }
.lamp__note { position: absolute; z-index: 3; font-size: max(11px, calc(100cqw / 60)); pointer-events: none; }
@container (max-width: 560px) {
  .lamp__note { font-size: clamp(11px, calc(100cqw / 31), 15px); }
  .lamp__note .note { white-space: normal !important; max-width: 38%; inset-inline-end: 1.4em !important; }
  .lamp__note .n1 { top: 1.2em !important; } .lamp__note .n2 { bottom: 1.2em !important; }
}

/* ---------- 07 integration ---------- */
.env--clay { background: var(--paper-3); }
.integ { position: absolute; inset: 0; }
.integ__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.integ__svg path { fill: none; stroke: rgba(28,26,23,.38); stroke-width: 1.4; }
.integ__svg .pk { fill: var(--signal); stroke: none; }
.hub { position: absolute; left: 50%; top: 46%; width: 8.4em; height: 8.4em; margin: -4.2em 0 0 -4.2em; border-radius: 1.6em; background: var(--ink); display: grid; place-items: center; box-shadow: 0 1.6em 2.6em -1.4em rgba(40,25,10,.6); }
.hub svg { width: 3.6em; height: 3.6em; color: var(--paper); }
.hub svg { --mk-c: #8FA9D6; --mk-w: 2.8; }
.inode { --ix: var(--x); --iy: var(--y); position: absolute; width: 12.8em; margin-inline-start: -6.4em; margin-top: -2.4em; display: flex; align-items: center; gap: .7em; padding: .75em .9em; border-radius: .9em; background: var(--card); box-shadow: 0 1em 1.8em -1.2em rgba(40,25,10,.4); }
.inode__ic { width: 2.6em; height: 2.6em; border-radius: .6em; display: grid; place-items: center; flex: none; }
.inode__ic svg { width: 1.45em; height: 1.45em; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inode > span:last-child { min-width: 0; }
.inode b { font-size: 1.1em; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inode small { display: flex; align-items: center; gap: .4em; font-size: max(11px, .85em); color: #1F5A3C; }
.inode small i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.integ__ok { position: absolute; left: 50%; top: calc(46% + 5.6em); transform: translateX(-50%); font-size: max(11px, 1.05em); }
@container (max-width: 560px) {
  .hub { top: 50%; }
  .integ__ok { top: calc(50% + 5.4em); }
  .inode { --ix: var(--mx); --iy: var(--my); width: 12.8em; margin-inline-start: -6.4em; padding: .65em .75em; gap: .6em; }
  .inode__ic { width: 2.3em; height: 2.3em; }
  .inode b { font-size: 1.05em; }
  .svc .is-sketch .integ .n1 { inset-inline-end: 1.4em !important; bottom: .8em !important; }
  /* the third "??" would sit on the shipping node in the tall plate: it moves to the free band left of the hub */
  .svc .is-sketch .integ .n3 { top: 41% !important; inset-inline-start: 8% !important; }
  /* the "?!" sat on the CRM card in the tall plate: it moves to the free band beside the hub */
  .svc .is-sketch .integ .n2 { top: 44% !important; inset-inline-start: 74% !important; }
}

/* ---------- 08 smart ---------- */
.env--slate { background: var(--night); color: #E8E3D9; }
.plan { position: absolute; inset: 2.6em 22em 2.6em 2.6em; }
:root[dir="rtl"] .plan { inset: 2.6em 2.6em 2.6em 22em; }
.plan svg { width: 100%; height: 100%; }
.plan .wall { fill: none; stroke: #C9C2B4; stroke-width: 3; stroke-linecap: square; }
.plan .wall-thin { fill: none; stroke: #6A6358; stroke-width: 1.5; }
.plan .room-lbl { font: 600 22px "JetBrains Mono", monospace; fill: #9A9286; }
.plan .heat { fill: url(#heatG); }
.plan .cone { fill: rgba(143, 169, 214, .16); stroke: rgba(143,169,214,.5); stroke-width: 1; }
.plan .sens { fill: var(--ok); }
.plan .sens--hot { fill: var(--signal-2); }
.plan .ring { fill: none; stroke: var(--ok); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; animation-play-state: paused; }
.plan .ring--hot { stroke: var(--signal-2); }
.live .plan .ring { animation-play-state: running; }
@keyframes ring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.alertc { position: absolute; inset-inline-end: 2.6em; top: 2.6em; width: 17.4em; background: var(--night-2); border: 1px solid #3A352E; border-radius: 1em; padding: 1.2em; display: grid; gap: .9em; }
.alertc__top { display: flex; gap: .7em; align-items: flex-start; }
.alertc__ic { width: 2.4em; height: 2.4em; border-radius: .6em; background: rgba(226,88,44,.18); display: grid; place-items: center; flex: none; }
.alertc__ic svg { width: 1.3em; stroke: var(--signal-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alertc b { font-weight: 600; font-size: 1.05em; line-height: 1.3; }
.alertc__spark { height: 5em; }
.alertc__spark svg { width: 100%; height: 100%; }
.alertc__spark path { fill: none; stroke: var(--signal-2); stroke-width: 2; }
.alertc__spark .area { fill: rgba(226,88,44,.14); stroke: none; }
.alertc__spark .lim { stroke: #5E584E; stroke-dasharray: 3 3; stroke-width: 1; }
.alertc__val { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; font: 400 max(11px, .9em) "JetBrains Mono", monospace; color: #9A9286; }
.alertc__val strong { font: 600 2em var(--f-display); color: #fff; letter-spacing: -.02em; }
.okline { position: absolute; inset-inline-end: 2.6em; top: 25em; width: 17.4em; display: flex; gap: .6em; align-items: center; padding: .9em 1.2em; border-radius: 1em; background: var(--night-2); font-size: 1em; color: #C9C2B4; }
.okline i { width: .6em; height: .6em; border-radius: 50%; background: var(--ok); flex: none; }
@container (max-width: 560px) {
  .plan, :root[dir="rtl"] .plan { inset: 1.2em 1.4em 17.2em; }
  .alertc { inset-inline: 1.4em; top: auto; bottom: 5.3em; width: auto; grid-template-columns: 1.3fr 1fr; align-items: center; padding: 1em; gap: .7em 1em; }
  .alertc__top { grid-column: 1 / -1; align-items: center; }
  .alertc__spark { height: 4.2em; }
  .alertc__val { flex-direction: column; align-items: flex-end; gap: .1em; }
  .okline { inset-inline: 1.4em; top: auto; bottom: 1.4em; width: auto; padding: .8em 1em; }
  .svc .is-sketch .plan ~ .n1 { display: none; }
}

/* ---------- 09 special ---------- */
.env--paper { background: var(--paper); }
.blank { position: absolute; inset: 5em 8em 5.4em; border: 1.5px solid var(--ink); background: var(--card); display: grid; place-items: center; text-align: center; padding: 2em; }
.blank::before { content: ""; position: absolute; inset: .6em; border: 1px solid var(--line); }
.blank__in { position: relative; display: grid; justify-items: center; gap: 1.6em; }
.blank__h { font: 600 2.9em/1.05 var(--f-display); letter-spacing: -.03em; margin: 0; max-width: 8em; text-wrap: balance; }
:root[lang="ar"] .blank__h { letter-spacing: 0; line-height: 1.35; }
.blank .btn { font-size: 1.15em; min-height: 3.4em; pointer-events: auto; }
.dim { position: absolute; display: flex; align-items: center; justify-content: center; font: 400 max(11px, .9em) "JetBrains Mono", monospace; color: var(--ink-3); }
.dim::before, .dim::after { content: ""; flex: 1; height: 1px; background: var(--ink-3); }
.dim span { padding: 0 .6em; }
.dim--x { left: 8em; right: 8em; top: 2.4em; }
.dim--y { top: 5em; bottom: 5.4em; inset-inline-start: 3.2em; width: 1px; flex-direction: column; }
.dim--y::before, .dim--y::after { width: 1px; height: auto; flex: 1; }
.dim--y span { padding: .6em 0; writing-mode: vertical-rl; }
.cross { position: absolute; width: 2.4em; height: 2.4em; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--signal); }
.cross::before { left: 50%; top: 0; bottom: 0; width: 1.5px; } .cross::after { top: 50%; left: 0; right: 0; height: 1.5px; }
.cross--a { top: 3.8em; inset-inline-start: 6.8em; } .cross--b { bottom: 4.2em; inset-inline-end: 6.8em; }
@container (max-width: 560px) {
  .blank { inset: 4.4em 2.6em 4.4em 4.6em; padding: 1.4em; }
  .svc .is-sketch .blank ~ .note { display: none; }
  .svc .is-sketch .blank ~ svg { width: 4.5em !important; height: 6em !important; top: 4.6em !important; inset-inline-end: 3em !important; opacity: .7; }
  .dim--x { left: 4.6em; right: 2.6em; top: 2em; }
  .dim--y { top: 4.4em; bottom: 4.4em; inset-inline-start: 2em; }
  .blank__h { font-size: 2.2em; max-width: 5.4em; }
  .blank .btn { font-size: 1em; min-height: 3.2em; padding: 0 1.1em; }
  .cross--a { top: 3.2em; inset-inline-start: 3.4em; } .cross--b { bottom: 3.2em; inset-inline-end: 1.4em; }
}

/* ==========================================================================
   PROCESS — opener: one centred line in the second voice
   ========================================================================== */
.process { padding-block: var(--sec) var(--sec-s); } /* integrate: the WHY headline follows at --sec-s, no double band */
.proc__h { margin: 0 auto clamp(48px, 5.5vw, 84px); max-width: 16em; text-align: center; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.08; color: var(--ink); text-wrap: balance; }
:root[lang="ar"] .proc__h { line-height: 1.4; font-size: clamp(38px, 4.6vw, 70px); }
/* the steps themselves: the assembly manual (grafts.css .man*) */

/* ==========================================================================
   WHY — the drawing's "general notes" block; each point carries a part balloon
   ========================================================================== */
.why { padding-block: var(--sec-s); } /* integrate: the dark band below is its own boundary */
.why__in { display: grid; gap: clamp(36px, 4vw, 56px); }
.why__h { margin: 0; font: 650 clamp(52px, 8.2vw, 132px)/.96 var(--f-display); letter-spacing: -.05em; max-width: 13ch; text-wrap: balance; }
:root[lang="ar"] .why__h { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
.gn { position: relative; border: 1.5px solid var(--ink); }
.gn::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.gn__head { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 16px clamp(22px, 3vw, 40px) 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }
.gn__head span:first-child { color: var(--ink); font-weight: 600; }
.gn__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gn__list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 26px; row-gap: 8px; align-content: start; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 3vw, 40px); }
.gn__list li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.gn__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
.gn__b { grid-row: span 2; position: relative; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.gn__b b { font: 600 17px/1 "Geologica", sans-serif; }
.gn__b i { position: absolute; top: 50%; inset-inline-start: 100%; width: 18px; border-top: 1px solid var(--ink); }
.gn__b i::after { content: ""; position: absolute; inset-inline-end: -3px; top: -3.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.gn__list h3 { margin: 0; padding-top: 9px; font: 600 clamp(21px, 1.8vw, 26px)/1.2 var(--f-display); letter-spacing: -.02em; }
:root[lang="ar"] .gn__list h3 { letter-spacing: 0; line-height: 1.45; padding-top: 4px; }
.gn__list p { margin: 0; color: var(--ink-2); max-width: 31em; }

/* ==========================================================================
   CLOSE — CTA + napkin + work order
   ========================================================================== */
.close { background: var(--night); color: var(--paper); padding-block: var(--sec) clamp(64px, 7vw, 108px); position: relative; overflow: hidden; }
.close__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.close__copy { grid-column: 1 / span 6; }
.close__h { margin: 0; font: 600 clamp(44px, 6.2vw, 100px)/1 var(--f-display); letter-spacing: -.045em; color: var(--paper); text-wrap: balance; }
:root[lang="ar"] .close__h { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
.close__lede { color: #BDB5A7; margin: 28px 0 38px; max-width: 26em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }.napkin { grid-column: 8 / span 5; margin: 0; position: relative; aspect-ratio: 1 / 1; background: #F6F2EA; color: var(--ink); transform: rotate(calc(-2.2deg * var(--d))); box-shadow: 0 40px 70px -30px rgba(0,0,0,.7), 0 2px 0 rgba(0,0,0,.2); border-radius: 3px;
  background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(28,26,23,.06) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(28,26,23,.06) 50%, transparent calc(50% + .5px)), radial-gradient(circle at 30% 20%, rgba(255,255,255,.6), transparent 60%); }
.napkin::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(60,100,168,.25); pointer-events: none; }
.napkin__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.napkin__cap { position: absolute; inset-inline: 28px; bottom: 24px; display: grid; gap: 8px; pointer-events: none; }
.napkin__cap .hand { font-size: 23px; line-height: 1.15; color: var(--pencil); }
:root[lang="ar"] .napkin__cap .hand { font-size: 28px; line-height: 1.4; }
.napkin__cap small { font-size: 13px; color: var(--ink-3); }
.napkin__clear { position: absolute; top: 22px; inset-inline-end: 22px; border: 1px solid rgba(28,26,23,.2); background: rgba(255,255,255,.5); border-radius: 999px; min-height: 40px; padding: 6px 16px; font-size: 11px; cursor: pointer; }
.napkin__clear:hover { border-color: var(--ink); }

/* the work order itself (form, configurator) lives in grafts.css (.wo, .cfg) */
/* an address still to be filled in by the owner ({{email}}, {{phone}}): a pencilled blank, labelled in the reader's language */
.ph { display: inline-block; min-width: 6.5em; margin-inline: .15em; padding: 0 .5em 1px; border-bottom: 1.5px dashed var(--pencil); color: var(--pencil); font-family: var(--f-hand); font-style: var(--hand-style); font-weight: var(--hand-w); font-size: 1.02em; line-height: 1.3; text-align: center; white-space: nowrap; unicode-bidi: isolate; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* the title block of the whole set (rhythm round): wordmark cell | tagline + links, then the four title cells */
.ftr { padding-block: clamp(56px, 6vw, 88px) calc(20px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.ftr__tb { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.ftr__tb::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; }
.ftr__big { --mk-w: 1.5; --mk-dash: 2.2 1.8; grid-column: 1 / span 8; display: flex; align-items: center; justify-content: flex-start; padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 44px); font: 800 clamp(52px, 10.6vw, 156px)/.8 "Geologica", sans-serif; letter-spacing: .01em; white-space: nowrap; direction: ltr; border-inline-end: 1px solid var(--line); min-width: 0; }
.ftr__o { width: .74em; height: .74em; margin-inline: .03em; color: var(--ink); flex: none; }
.ftr__side { grid-column: 9 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.6vw, 36px); }
.ftr__cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); font-size: 11px; }
.ftr__cells > div { display: flex; flex-direction: column; gap: 4px; padding: 14px clamp(22px, 3vw, 44px) 16px; border-inline-end: 1px solid var(--line); min-width: 0; }
.ftr__cells > div:last-child { border-inline-end: 0; }
.ftr__cells dt { color: var(--ink-3); }
.ftr__cells dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ftr__ok dd { color: #2C6E4A; }
.ftr__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ftr__row--b { border-top: 0; padding-block: 20px 0; }
.ftr__tag { margin: 0; font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.ftr__nav { display: flex; gap: 4px 22px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .ftr__big { grid-column: 1 / -1; border-inline-end: 0; border-bottom: 1px solid var(--line); justify-content: center; font-size: clamp(52px, 15vw, 164px); }
  .ftr__side { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .ftr__big { padding: 24px 16px; font-size: clamp(44px, 14.4vw, 90px); }
  .ftr__side { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .ftr__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__cells > div { padding: 12px 20px 14px; }
  .ftr__cells > div:nth-child(2) { border-inline-end: 0; }
  .ftr__cells > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.ftr__nav a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.ftr__nav a:hover { color: var(--signal); }
.ftr__made { margin: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ftr__made .hand { font-size: 20px; color: var(--pencil); line-height: 1.3; }
:root[lang="ar"] .ftr__made .hand { font-size: 24px; line-height: 1.5; }
.ftr__rights { margin: 0; color: var(--ink-3); }
.ftr__contact { margin: 0; font-size: 15px; color: var(--ink-2); }
.ftr__contact a, .wo__text .ct { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.ftr__contact i { font-style: normal; color: var(--ink-3); }
/* herofix: a phone number never breaks across lines (Arabic 393: "+90" at a line end, "540 783 00 63" on the next) */
.ct[href^="tel:"] { white-space: nowrap; }
.xray-btn { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--pencil); color: var(--pencil); background: transparent; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 11px; transition: background .25s, color .25s; }
.xray-btn:hover, .xray-btn[aria-pressed="true"] { background: var(--pencil); color: #fff; }
.xray-btn__i { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; overflow: hidden; }
.xray-btn__i::after { content: ""; position: absolute; inset: 0 50% 0 0; background: currentColor; }

/* X-ray: the whole page shows its own blueprint */
html.xray body { background: #F4F0E7; background-image: linear-gradient(var(--pencil-faint) 1px, transparent 1px), linear-gradient(90deg, var(--pencil-faint) 1px, transparent 1px); background-size: 16px 16px; }
html.xray body *:not(svg):not(svg *):not(.seam):not(.seam *):not(.duo__pane):not(.duo__in):not(.duo__in *):not(.hero__sk):not(.hero__sk *):not(canvas) { outline: 1px solid rgba(60,100,168,.45) !important; outline-offset: -1px; color: var(--pencil) !important; background-color: transparent !important; box-shadow: none !important; border-color: var(--pencil) !important; }
html.xray .close, html.xray .hdr { background: transparent !important; }
html.xray .btn { border-style: dashed !important; }
html.xray .btn::before { display: none; }
html.xray .ftr__o, html.xray .logo__o { color: transparent !important; }
html.xray .xray-btn { background: var(--pencil) !important; color: #fff !important; }
html.xray .xray-btn * { color: #fff !important; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
/* reveals only hide content when the script is running (html.js is set in <head>; app.js removes it if it cannot boot) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.is-still .rv { opacity: 1; transform: none; transition: none; }
/* no script: the pre-rendered Turkish page. Seams are fixed lines (no knob to grab), the loader never shows. */
html:not(.js) .seam__knob, html:not(.js) .seam__tag, html:not(.js) .seam::before, html:not(.js) .loader, html:not(.js) .lang, html:not(.js) .burger, html:not(.js) .xray-btn, html:not(.js) .napkin__clear { display: none; }
html:not(.js) .stage__meta span:first-child { visibility: hidden; }
/* the napkin is a drawing surface: without the script there is nothing to draw with, so the invitation stands alone */
html:not(.js) .napkin { display: none; }
/* the games need the script: without it the frame shows the default game's poster (games/host.css) */
html:not(.js) .duo--stage[data-id="game-dev"] .duo__sketch { display: none; }
/* …and the level fills the frame (no empty half beyond a seam that cannot move) (QA F14) */
html:not(.js) .duo--stage[data-id="game-dev"] { --s: 1 !important; }
html:not(.js) .duo--stage[data-id="game-dev"] .seam { display: none; }
/* the hero has no pencil layer without the script: no lone line through the headline either */
html:not(.js) #hero-duo > .seam { display: none; }
/* no script, no menu button: the header keeps its links on tablets and phones (QA F9) */
@media (max-width: 1180px) {
  html:not(.js) .nav { display: flex; flex-wrap: wrap; gap: 0; margin-inline-start: auto; }
  html:not(.js) .nav a { padding: 8px; }
}
@media (max-width: 600px) {
  html:not(.js) .hdr { height: auto; }
  html:not(.js) .hdr__in { flex-wrap: wrap; gap: 4px 12px; padding-block: 8px; }
  html:not(.js) .hdr__end { display: none; }
  html:not(.js) .nav { margin-inline-start: -8px; width: 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .hdr__end { margin-inline-start: auto; }
  .svc__text { grid-column: 1 / span 5; }
  .svc .stage { grid-column: 6 / span 7; }
  .svc--flip .svc__text { grid-column: 8 / span 5; }
  /* integrate: the generic stage rule above outranked the flip at 861-1180px and laid sheets 02/04 over their own text */
  .svc--flip .stage { grid-column: 1 / span 7; }
  /* the lamp sheet stays wide: its text spans the sheet (own 12-column grid) and the stage runs full width under it */
  .svc--wide .svc__text, .svc--wide .stage { grid-column: 1 / -1; }
  /* compact sheets: one per row, plate beside its caption */
  .trio { grid-template-columns: 1fr; row-gap: var(--sec-s); }
  .svc--compact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .svc--compact .stage { grid-column: 1 / span 6; grid-row: 1; }
  .svc--compact .svc__text { grid-column: 8 / span 5; grid-row: 1; }
  .reg__h { grid-column: 1 / -1; }
  .reg__lede { grid-column: 1 / span 8; }
}
@media (max-width: 860px) {
  :root { --hdr: 60px; }
  body { font-size: 16px; }
  .hdr__cta, .hdr .lang { display: none; }
  .sheet { --padT: 34px; --padX: 22px; min-height: auto; }
  .hero__prod { padding-inline-start: 32px; }
  .ruler--x { display: none; }
  .ruler--y { width: 12px; }
  .ruler--y span { display: none; }
  .xhair { display: none; }
  /* stacked hero: the pencil band covers the headline only (heroClip), copy and set sit below it untouched */
  .hero__low { display: block; min-height: 0; margin-top: 0; padding-top: 64px; }
  /* the set follows the copy; measureHero slides it (--set-m) so the seam runs through its drawing */
  .set { position: relative; inset: auto; width: auto; max-width: 470px; margin-top: 56px; margin-inline-start: var(--set-m, 0px); }
  .titleblock > span:nth-child(2), .titleblock > span:nth-child(3) { display: none; }
  .titleblock > * { padding: 9px 12px; }
  .reg { display: block; }
  .reg__lede { margin-top: 24px; }
  .reg__table { margin-top: 48px; }
  .bom { grid-template-columns: 1fr; }
  .bom li { border-inline-end: 0 !important; }
  .bom a, .bom li:nth-child(3n+2) a, .bom li:nth-child(3n) a { padding: 15px 0; grid-template-columns: 30px 1fr auto; }
  .svc, .svc--wide { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .svc__text, .svc--wide .svc__text { display: block; }
  .svc--wide .stage { margin-top: 0; }
  .svc--wide .duo--stage, .lampstage { aspect-ratio: 4 / 5; }
  .stage__frame { margin-inline: -4px; }
  .svc--compact { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  /* one reading order for all nine sheets (polish B5/A10): the sheet header (number, name, line), then its drawing
     straight away, then the details. The drawing is never separated from its own header. */
  .svc, .svc--wide, .svc--compact { gap: 0; }
  .svc .svc__text, .svc--wide .svc__text { display: contents; }
  .svc .svc__no { order: 1; } .svc .svc__name { order: 2; } .svc .svc__one { order: 3; margin-bottom: 20px; }
  .svc .stage, .svc--compact .stage { order: 4; margin: 0 0 26px; }
  .svc .svc__desc { order: 5; } .svc .svc__ex, .svc .svc__exline { order: 6; } .svc .g-ask { order: 7; align-self: flex-start; }
  /* the lamp's one-row caption (wide layouts) reads like every other sheet when stacked */
  .svc--wide .svc__text > .svc__one { margin-bottom: 20px; }
  .svc--wide .svc__text > .svc__desc { margin: 0 0 24px; padding: 0; border-top: 0; }
  .gn__list { grid-template-columns: 1fr; }
  .gn__list li:nth-child(odd) { border-inline-end: 0; }
  .gn__list li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .gn__list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 22px; }
  .gn__b { width: 40px; height: 40px; }
  .gn__b i { width: 14px; }
  .gn__head { flex-direction: column; gap: 4px; }
  .close__grid { display: block; }
  .napkin { margin-top: 48px; }
  .ftr__row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .seam__tag { display: none; }
}
/* phones: a compact front sheet after the CTAs (no tabs, ~170px): the drawing strip on top, where the seam runs
   (measureHero moves the drawing under it, --art-x), the printed label below it */
@media (max-width: 600px) {
  /* herofix — the title block never rests under a phone browser's bottom toolbar (iOS Safari's floating address bar
     covers ~70-90px of the screen bottom). The phone sheet is taller than the space above that bar in every language,
     so it can never sit fully above it in the first frame; instead the sheet is at least one large viewport tall
     (lvh: constant while the bar shrinks/grows, no layout jump), which puts the whole title block just past the
     screen's bottom edge at rest. After a short scroll it reads fully above the bar. Never sized to exactly 100vh. */
  .sheet { min-height: calc(100vh - var(--hdr) - 10px + 72px); min-height: calc(100lvh - var(--hdr) - 10px + 72px); }
  /* …and the page's last lines (contact, rights) can scroll clear of that bar and the home indicator */
  .ftr { padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 48px)); }
  .set { max-width: none; margin: 40px 0 0; padding: 0 14px 14px 0; }
  .set__tabs { display: none; }
  .set__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: 88px auto; height: auto; }
  .set__art { position: relative; display: block; padding: 0; border-bottom: 1px solid rgba(28,26,23,.24); }
  .set__art svg { position: absolute; top: 9px; width: 94px; height: 70px; max-height: none; inset-inline-start: calc(var(--art-x, 50%) - 47px); }
  .set__lab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 44px 13px 16px; border-inline-start: 0; }
  .set__top { grid-row: span 2; }
  .set__no { font-size: 34px; }
  .set__of { display: none; }
  .set__name { margin-top: 1px; }
  .set__one { margin-top: 2px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 2; }
  .set__arr { position: absolute; inset-inline-end: 14px; bottom: 13px; }
}
/* integrate: the German cover line ("Neun Blätter. Welches passt zu Ihrem Betrieb?") lost its last word to the 2-line clamp at 360px */
@media (max-width: 380px) { :root[lang="de"] .set__one { font-size: 13px; } :root[lang="de"] .set__lab { padding-inline-end: 38px; } }

/* ==========================================================================
   SHEET NAVIGATOR (rhythm round, jury D #5) — snav.js
   A narrow title-block tab printed in the page margin, the way a drawing carries its sheet number in the border:
   it lives in the start gutter (end gutter in RTL), so it never sits on text or a control. Shown only while the
   sheets are on screen and only where the margin is wide enough (≥1240px); opens the 01–09 jump list.
   ========================================================================== */
.snav { --m: max(var(--gut), calc((100vw - var(--maxw)) / 2)); position: fixed; z-index: 40; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline-start: max(6px, calc((var(--m) - 8px - 30px) / 2)); display: none; }
/* integrate: from 1240px (at 1150-1239 the tab sat 4-10px from the frames' corner marks and the thread) */
@media (min-width: 1240px) and (min-height: 560px) { .snav { display: block; } }
.snav__btn { position: relative; display: flex; flex-direction: column; align-items: center; width: 30px; padding: 0; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.snav.on .snav__btn { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
.snav__btn:hover { background: var(--card); }
.snav__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
/* the label reads upwards in the margin (sheet borders are lettered that way); the number stays upright at the foot */
.snav__lbl { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 0 12px; max-height: min(320px, 46vh); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1 var(--f-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-2); }
:root[dir="rtl"] .snav__lbl { transform: none; font-family: var(--f-body); letter-spacing: 0; font-size: 12.5px; }
.snav__lbl b { font-weight: 600; color: var(--ink); }
.snav__lbl i { font-style: normal; color: var(--ink-3); margin-block: 0 .5em; }
.snav__no { width: 100%; display: grid; place-items: center; gap: 1px; padding: 7px 0 6px; border-top: 1px solid var(--line); font: 600 12px/1 "JetBrains Mono", monospace; }
.snav__no bdi { display: grid; justify-items: center; gap: 3px; }
.snav__no i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--ink-3); }
.snav__menu a b { font-weight: inherit; }
.snav__no::before { content: ""; width: 6px; height: 6px; margin-bottom: 4px; border-radius: 50%; background: var(--signal); }
.snav__btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.snav__btn[aria-expanded="true"] .snav__lbl, .snav__btn[aria-expanded="true"] .snav__lbl b, .snav__btn[aria-expanded="true"] .snav__no i { color: var(--paper); }
/* the jump list: a small title block that opens beside the tab */
.snav__menu { position: absolute; bottom: 0; inset-inline-start: calc(100% + 12px); width: 320px; max-height: calc(100vh - var(--hdr) - 48px); overflow: auto; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 0 24px 50px -28px rgba(28, 26, 23, .45); }
.snav__menu[hidden] { display: none; }
.snav__head { display: flex; justify-content: space-between; margin: 0; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.snav__head b { color: var(--ink); font-weight: 600; }
.snav__menu ol { list-style: none; margin: 0; padding: 4px 0; }
.snav__menu a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; min-height: 40px; padding: 6px 16px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.25; }
.snav__menu a i { font: 400 11px "JetBrains Mono", monospace; font-style: normal; color: var(--pencil); }
.snav__menu a:hover, .snav__menu a:focus-visible { background: rgba(28, 26, 23, .05); outline: none; }
.snav__menu a:focus-visible { box-shadow: inset 3px 0 0 var(--signal); }
:root[dir="rtl"] .snav__menu a:focus-visible { box-shadow: inset -3px 0 0 var(--signal); }
.snav__menu a[aria-current] { font-weight: 600; }
.snav__menu a[aria-current] i { color: var(--signal-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .snav__btn, .snav.on .snav__btn { transform: none; transition: none; } }
html.xray .snav { display: none; }

/* rhythm round — phones: shorter breaths, and each sheet reads number · name · line · drawing · two examples;
   the description and the third example wait behind one "Ayrıntılar" toggle (jury C #3, A10). No-JS keeps the toggle working. */
@media (max-width: 600px) {
  :root { --sec: 72px; --sec-s: 52px; --sheet-gap: 64px; }
  .sheets { padding-top: 36px; }
  .svc .svc__desc, .svc__ex .ex-x { display: none; }
  /* the toggle and the sheet's "tell us" link share one row; an opened toggle takes the full width and the link moves under it */
  .svc, .svc--wide, .svc--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .sheets .svc > *, .sheets .svc .svc__text > * { grid-column: 1 / -1; grid-row: auto; }
  .sheets .svc .svc__more { display: block; order: 6; grid-column: 1; margin-top: 6px; }
  .sheets .svc .svc__more[open] { grid-column: 1 / -1; }
  .sheets .svc .svc__text > .g-ask { grid-column: 2; grid-row: auto; order: 7; margin-top: 6px; justify-self: end; }
  .bom a, .bom li:nth-child(3n+2) a, .bom li:nth-child(3n) a { padding: 12px 0; }
  .reg__table { margin-top: 36px; }
  .svc .svc__no { margin-bottom: 14px; }
  .svc .stage, .svc--compact .stage { margin-bottom: 18px; }
  .svc__ex, .svc__exline { padding-top: 12px; }
  .gn__list li { padding-block: 22px; }
  /* footer title block on a phone: project and status only (the hero's block drops the same two cells) */
  .ftr__cells > div:nth-child(2), .ftr__cells > div:nth-child(3) { display: none; }
  .ftr__cells > div:nth-child(n+3) { border-top: 0; }
  .ftr__cells > div:first-child { border-inline-end: 1px solid var(--line); }
}

/* ==========================================================================
   MOBILE TIGHTEN (owner-approved, phones only, ≤600px). Larger screens never see these parts:
   the short tile names, the notes toggle and the napkin's pencil button are display:none above 600px.
   ========================================================================== */
.bom__s, .gn__more, .napkin__go { display: none; }
@media (max-width: 600px) {
  /* 1. the register as a 3 × 3 grid of tiles (the cells of a drawing index): number, short name, arrow down.
        The full name stays in the link, visually hidden, so the accessible name is unchanged. */
  .reg__th { padding-inline: 10px; }
  .bom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bom li { position: relative; }
  .bom li:not(:nth-child(3n)) { border-inline-end: 1px solid var(--line) !important; }
  .bom a, .bom li:nth-child(3n+2) a, .bom li:nth-child(3n) a { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; height: 100%; min-height: 88px; padding: 11px 10px 12px; -webkit-tap-highlight-color: transparent; }
  .bom a:active { background: rgba(28,26,23,.07); }
  .bom a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
  .bom b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bom svg { position: absolute; top: 10px; inset-inline-end: 8px; width: 14px; height: 14px; }
  .bom__s { display: block; font: 500 14.5px/1.22 var(--f-body); letter-spacing: -.01em; color: var(--ink); hyphens: manual; overflow-wrap: break-word; }
  :root[lang="ar"] .bom__s { font-size: 14.5px; line-height: 1.5; letter-spacing: 0; }
  :root[lang="de"] .bom__s, :root[lang="ru"] .bom__s { font-size: 14px; }

  /* 2. general notes: the first two stay open, the rest wait behind one toggle (app.js initNotes). Same look as
        the sheets' "Ayrıntılar" (circled plus → minus, mono caps); the plus sits under the balloons, the label
        lines up with the note titles. Without JS every note shows and the toggle stays hidden. */
  html.js .gn:not(.is-open) .gn__list li:nth-child(n+3) { display: none; }
  html.js .gn__more { position: relative; display: flex; align-items: center; width: 100%; min-height: 58px; margin: 0; padding: 4px 22px 6px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; text-align: start; font: 500 11px/1.3 var(--f-mono); letter-spacing: var(--track-mono); text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
  .gn__more .svc__plus { margin-inline: 11px 33px; }
  .gn__more:focus-visible { outline: 2px solid var(--signal); outline-offset: -5px; }
  .gn__more:active { background: rgba(28,26,23,.05); }
  .gn.is-open .gn__more .svc__plus path { d: path("M8 8v0M3 8h10"); }
  :root[lang="ar"] .gn__more { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; }

  /* 3. the napkin stays, compact: a short landscape sheet. A finger scrolls the page over it until the visitor
        picks up the pencil (.napkin__go or one tap); while drawing the dashed margin turns vermilion and the
        canvas takes the touch. Mouse and pen draw at any time (app.js Napkin). */
  .napkin { aspect-ratio: auto; height: clamp(208px, 60vw, 232px); margin-top: 36px; transform: rotate(calc(-1.6deg * var(--d))); }
  .napkin:not(.is-drawing) .napkin__c { touch-action: manipulation; }
  .napkin.is-drawing::after { border-color: rgba(200,64,26,.6); }
  .napkin__cap { inset-inline: 24px; bottom: 20px; gap: 4px; }
  .napkin__cap .hand { font-size: 22px; }
  :root[lang="ar"] .napkin__cap .hand { font-size: 26px; line-height: 1.35; }
  .napkin__cap small { display: none; font-size: 12.5px; }
  .napkin.is-drawing .napkin__cap small { display: block; }
  .napkin__clear { display: none; top: 18px; inset-inline-end: auto; inset-inline-start: 18px; min-height: 44px; }
  .napkin.is-drawing .napkin__clear { display: block; }
  .napkin__go { position: absolute; top: 18px; inset-inline-end: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 13px; border: 1px solid rgba(28,26,23,.22); border-radius: 999px; background: rgba(255,255,255,.62); color: var(--ink); font-size: 11px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .napkin__go svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .napkin__go:focus-visible, .napkin__clear:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .napkin.is-drawing .napkin__go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  :root[lang="ar"] .napkin__go { font-family: var(--f-body); font-size: 13.5px; letter-spacing: 0; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader { display: none; }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   PERF — smooth seams on phones (stage "perf")
   A moving seam (hero intro sweep and nudge, scroll-driven sheets, drags) only moves compositor layers:
   the panes and their contents slide by transforms (app.js Seam.place), the seam itself is its own layer, and the
   hero's pencil layer is its own layer, so heroClip()'s clip-path moves a mask instead of repainting the pencil
   artwork with its rough filter every frame (the slowest paint on iOS Safari).
   ========================================================================== */
.seam { will-change: transform; }
.hero__sk { will-change: transform; }
.cfg__pr { will-change: transform; }
/* 04 automation, tall plates: the dot runs down its short wire by transform (was `top`: a layout per frame) */
@container (max-width: 560px) {
  .wire::after { animation-name: travelYt; }
}
@keyframes travelYt { 0% { transform: none; opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; transform: translateY(.5em); } 33%, 100% { opacity: 0; transform: translateY(.5em); } }

/* ==========================================================================
   HERO UNITY (stage "unity") — phones and tablets (≤860px) only
   Owner: the paragraph and the two buttons sat between the headline and the "00 · Sizin fikriniz" card and broke
   the idea. Headline and card are one sketch → product drawing: eyebrow → headline → card → paragraph → buttons.
   Layout only (flex order, no duplicated content); measureHero() / heroClip() (app.js, HG.unit) make the pencil
   zone one area from the headline down to the card's drawing, with one continuous seam through both; the copy
   below is never pencilled or crossed. Above 860px nothing here applies.
   ========================================================================== */
@media (max-width: 860px) {
  .hero__low { display: flex; flex-direction: column; align-items: stretch; padding-top: 80px; }
  .hero__low > .set { order: -1; margin-top: 0; }
  .hero__low > .hero__copy { margin-top: 48px; }
}
@media (max-width: 600px) {
  .hero__low { padding-top: 72px; }
  .hero__low > .set { margin: 0; }
  .hero__low > .hero__copy { margin-top: 36px; }
}
/* tablets (601–860px) where the slid two-panel card cannot put its drawing under the seam (measureHero adds
   .set-strip, e.g. English at 768): the phone's strip card — the drawing strip on top (the drawing moves under the
   seam, --art-x), the printed label below; no index tabs (the register right below lists the nine sheets) */
@media (min-width: 601px) and (max-width: 860px) {
  .set-strip .set { padding: 0 14px 14px 0; }
  .set-strip .set__tabs { display: none; }
  .set-strip .set__sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: 112px auto; height: auto; }
  .set-strip .set__art { position: relative; display: block; padding: 0; border-bottom: 1px solid rgba(28,26,23,.24); }
  .set-strip .set__art svg { position: absolute; top: 11px; width: 120px; height: 90px; max-height: none; inset-inline-start: calc(var(--art-x, 50%) - 60px); }
  .set-strip .set__lab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 14px 48px 15px 18px; border-inline-start: 0; }
  .set-strip .set__top { grid-row: span 2; }
  .set-strip .set__of { display: none; }
  .set-strip .set__name { margin-top: 1px; }
  .set-strip .set__one { margin-top: 2px; -webkit-line-clamp: 2; }
  .set-strip .set__arr { position: absolute; inset-inline-end: 16px; bottom: 15px; }
}
/* WebKit (app.js adds html.wk): the hero card's pencil drawing without the #rough filter (it could paint blank) */
.wk .hero__sk .set__sheet, .wk .hero__sk .set__art svg { filter: none; }
/* WebKit (Safari, all iOS browsers): the feImage-based #rough filter can leave filtered drawings blank away from the top of the page.
   Same drawings, no pencil wobble, always visible (the hero card already had this; extended to every sketch layer). */
.wk .is-sketch .mock { filter: none; }