/* Signature 06 — a digital workbench, with editorial space to read the work. */
:root { --paper:#1d241e; --surface:#252e25; --surface-2:#2e382d; --ink:#edf0e5; --muted:#aeb8a6; --line:#3d4839; --accent:#d4ef79; --orange:#c0d894 }
html[data-theme=light] { --paper:#f4f3ed; --surface:#eeeee5; --surface-2:#e4e5da; --ink:#23271f; --muted:#666b60; --line:#d6d8ce; --accent:#5c713b; --orange:#596c37; --accent-ink:#fafbf5 }
body { font-size:16px }
.main-nav { gap:23px }
.nav-reading { text-align:start; padding:8px 0; font-size:inherit; color:var(--muted) }
.nav-reading[aria-pressed=true] { color:var(--accent) }
.nav-reading:hover { color:var(--ink) }
.button { font-size:13px }
.signature-hero { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:35px 55px; padding-top:75px }
.signature-hero .hero-copy { padding-top:22px }
.signature-hero .eyebrow { font-size:10px; line-height:1.8; max-width:420px }
.signature-hero h1 { position:relative; font-size:clamp(59px,6.15vw,89px); line-height:1.11; letter-spacing:-.065em; margin-block:28px 30px; font-weight:500 }
.hero-stop { display:inline-block; font-size:.5em; margin-inline-start:14px; vertical-align:baseline; color:var(--orange) }
.signature-hero .hero-intro { font-size:15px; line-height:1.95; max-width:450px }
.signature-hero .hero-actions { margin-top:31px; gap:23px; flex-wrap:wrap }
.signature-hero .play-link { font-size:12px; max-width:200px; line-height:1.8 }
.signature-hero .hero-depth-links { font-size:11px; margin-top:23px; gap:12px 25px }
.signature-hero .hero-signature { margin-top:34px }
.signature-hero .signature { font-size:34px }
.signature-hero .hero-signature .mono { max-width:240px; font-size:8px; line-height:1.8 }
.signature-hero .hero-bottom { margin-top:0; padding-block:26px; grid-column:1/-1 }
.signature-hero .hero-bottom>.mono { font-size:9px }
.signature-hero .scroll-cue { font-size:11px }
.signature-bench { position:relative; margin:0; padding:23px; min-height:0; border:1px solid var(--line); border-radius:16px; background:linear-gradient(155deg,var(--surface),var(--paper)); overflow:hidden; max-width:none; isolation:isolate }
.bench-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; position:relative; z-index:1 }
.bench-heading>.mono { font-size:9px; color:var(--muted) }
.bench-indicator { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px }
.bench-indicator i { width:5px; height:5px; background:var(--orange); border-radius:50% }
.bench-scene { width:100%; max-height:345px; height:auto; display:block; margin-block:6px -1px; overflow:visible; transform:none!important }
.bench-grid { color:var(--line); opacity:.6 }
.bench-shadow { fill:#000; opacity:.15; transform:translateY(12px) }
.bench-top { fill:var(--surface-2); stroke:#666e59; stroke-width:1 }
.bench-side { fill:#3a4032; stroke:#555e48; stroke-width:.5 }
.bench-side.second { fill:#262a1f }
.bench-etch { fill:none; stroke:#768363; stroke-width:.65; opacity:.7 }
html[data-theme=light] .bench-top { fill:#d5dace; stroke:#9ba78a }
html[data-theme=light] .bench-side { fill:#b2bda2 }
html[data-theme=light] .bench-side.second { fill:#a0af8a }
.bench-wire { stroke:var(--orange); stroke-width:2; fill:none; stroke-dasharray:5 7; animation:benchFlow 5s linear infinite }
.bench-floating { animation:benchFloat 8s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.bench-chip { animation-delay:-4s }
.bench-display { display:none }
[data-bench-project=v2f] [data-bench-art=v2f],[data-bench-project=aisubtitle] [data-bench-art=aisubtitle],[data-bench-project=converter] [data-bench-art=converter] { display:block }
.bench-projects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:7px; border:1px solid var(--line); border-radius:8px; background:var(--paper) }
.bench-projects button { display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 9px; border-radius:5px; font-size:11px; color:var(--muted); transition:background .2s,color .2s }
.bench-projects button>.mono { font-size:8px; color:inherit }
.bench-projects button[aria-pressed=true] { color:var(--accent-ink); background:var(--accent) }
.bench-projects button:hover:not([aria-pressed=true]) { color:var(--ink); background:var(--surface) }
.bench-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:21px }
.bench-bottom>div { min-width:0 }
#bench-study { display:block; font-family:var(--display); font-size:19px; line-height:1.3 }
#bench-study:hover { color:var(--accent) }
.bench-caption { display:block; color:var(--muted); font-size:8px; margin-top:7px; max-width:280px }
.signature-bench .lab-core { position:static; left:auto; top:auto; width:69px; height:65px; padding:10px 4px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); transform:none; box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex-shrink:0 }
.signature-bench .lab-core:hover { background:var(--accent); color:var(--accent-ink) }
.signature-bench .lab-core>svg { width:22px; height:22px; stroke-width:1.6; transform:rotate(var(--lab-angle,0deg)); transition:transform .4s; fill:none; stroke:currentColor }
.signature-bench .lab-step { position:static; bottom:auto; font-size:7px; color:inherit; margin:0; padding:0; transform:none }
.signature-bench .lab-caption { position:static; left:auto; right:auto; bottom:auto; border:0; display:block; padding:0; margin-top:17px; color:var(--muted) }
.signature-bench .lab-caption .mono { font-size:7px; max-width:none }
.stack-band { margin-top:0 }
.stack-band .wrap>.mono { font-size:9px }
.project-grid { display:grid; grid-template-columns:1fr; gap:0 }
.project-card,.project-card:first-child { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:center; gap:60px; padding-block:42px; margin:0; border-top:1px solid var(--line); grid-column:auto }
.project-card:first-child { border-top:0; padding-top:0 }
.project-card:nth-child(even) .project-art { order:2 }
.project-card:nth-child(even) .project-meta { order:1 }
.project-art,.project-card:first-child .project-art { height:370px; border-radius:12px; background:var(--surface); transform:none }
.concept-art { position:relative; height:100%; width:100% }
.concept-art>img { width:100%; height:100%; object-fit:cover }
.project-meta { padding:0 }
.project-meta .eyebrow { font-size:10px; color:var(--orange) }
.project-title { text-align:start; padding-block:19px; width:100%; gap:25px }
.project-title h3,.project-card:first-child h3 { font-size:clamp(32px,3.3vw,47px); line-height:1.13 }
.project-meta>p { font-size:14px; line-height:1.9; max-width:550px }
.project-footer,.project-card:first-child .project-footer { display:flex; flex-direction:column; align-items:start; border-top:1px solid var(--line); padding-top:18px; margin-top:22px; gap:14px }
.project-footer .mono,.project-card:first-child .project-footer .mono { font-size:10px; line-height:1.8; max-width:none }
.project-footer .text-link,.project-card:first-child .project-footer .text-link { font-size:11px }
.project-case-link { font-size:13px; margin-top:23px }
.work-view-controls { display:flex; flex-wrap:wrap; gap:5px; border:1px solid var(--line); padding:4px; border-radius:99px; margin-inline-start:auto }
.work-view-controls button { font-size:10px; color:var(--muted); padding:9px 13px; border-radius:99px; white-space:nowrap }
.work-view-controls button[aria-pressed=true] { color:var(--ink); background:var(--surface-2) }
.project-count { font-size:9px }
.filters button { font-size:11px }
.work-toolbar { flex-wrap:wrap; gap:17px; border:0; margin-bottom:27px }
.system-art { padding:67px 28px 28px; min-height:370px; background:radial-gradient(ellipse at top right,#d4ef7912,transparent 65%),var(--surface); height:100% }
.system-kicker { color:var(--accent); font-size:9px; display:block; margin-bottom:24px }
.system-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.system-nodes button { text-align:start; min-width:0; position:relative; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:16px 12px; min-height:111px; display:flex; flex-direction:column; justify-content:start; gap:11px; transition:border-color .2s,background .2s }
.system-nodes button>.mono { font-size:8px; color:var(--muted) }
.system-nodes button b { font-family:var(--display); font-size:15px; font-weight:500; line-height:1.4 }
.system-nodes button[aria-pressed=true] { border-color:var(--accent); background:var(--surface-2) }
.system-node-arrow { color:var(--accent); position:absolute; top:9px; inset-inline-end:11px; font-size:16px }
.system-description { font-size:12px; line-height:1.85; margin-top:22px; max-width:550px }
.system-boundary { display:block; font-size:7px; color:var(--muted); padding-top:14px; margin-top:16px; border-top:1px solid var(--line) }
.project-card[data-view=system] .project-art { height:auto; min-height:370px }
.signature-lab-section { background:var(--surface); border-block:1px solid var(--line) }
.signature-experiments { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px }
.signature-experiments>article { padding:34px; background:var(--paper); border:1px solid var(--line); border-radius:12px; min-width:0; display:flex; flex-direction:column; align-items:stretch }
.experiment-heading { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:28px }
.experiment-heading>.mono { color:var(--orange); font-size:9px }
.experiment-tag { color:var(--muted); font-size:10px }
.signature-experiments h3 { font-size:clamp(32px,3.05vw,44px); line-height:1.2; margin-bottom:20px }
.signature-experiments>article>p:not(.experiment-note) { font-size:13px; line-height:1.9; max-width:480px }
.caption-screen { position:relative; margin-top:25px; aspect-ratio:16/9; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#263017; direction:ltr }
.caption-screen>.landscape { position:absolute; inset:0; width:100%; height:100%; opacity:.7; transform:none }
.caption-screen-label { position:absolute; top:13px; left:14px; color:#e2e9e1; font-size:7px }
.caption-screen .caption-overlay { position:absolute; bottom:29px; left:10%; right:10%; margin:0; text-align:center; font:500 14px/1.6 var(--body); color:#fff; background:#151910d9; border-radius:4px; padding:9px; text-wrap:balance }
.caption-screen .caption-overlay[lang=ar] { font-family:Arial,sans-serif; font-size:17px }
.caption-time { position:absolute; bottom:9px; right:13px; color:#e1e6d9; font-size:8px }
.caption-controls { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-top:21px }
.caption-controls label,.caption-range-label { color:var(--muted); font-size:11px }
.caption-controls select { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:5px; padding:9px 11px; font-size:12px; min-width:125px }
.caption-range-label { display:block; margin-top:20px }
#caption-position { width:100%; min-height:30px; accent-color:var(--accent); margin:5px 0; cursor:pointer; direction:ltr }
.caption-timeline { display:flex; justify-content:space-between; direction:ltr; font-size:8px; color:var(--muted) }
.caption-source { margin:20px 0 0; border-inline-start:2px solid var(--accent); background:var(--surface); padding:16px; border-radius:0 5px 5px 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); font:10px/1.9 var(--mono); min-height:102px }
.caption-source code { font:inherit; unicode-bidi:plaintext }
.route-presets { display:flex; flex-wrap:wrap; gap:7px; margin-top:27px; direction:ltr }
.route-presets button { padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:6px; font:10px var(--mono); color:var(--muted); min-height:39px }
.route-presets button[aria-pressed=true] { color:var(--accent); border-color:var(--accent) }
.conversion-route { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1.3fr) 16px minmax(0,1fr); gap:9px; align-items:center; margin-block:35px; direction:ltr }
.route-end { padding:17px 10px; border:1px solid var(--line); border-radius:8px; display:grid; gap:9px; justify-items:center; color:var(--muted); background:var(--surface) }
.route-end>span { font:25px/1 var(--display); color:var(--accent) }
.route-end b { color:var(--ink); font:12px var(--mono) }
.route-end small { font-size:9px }
.route-end.output>span { color:var(--orange) }
.route-engine { padding:23px 6px; text-align:center; border-block:1px dashed var(--line) }
.route-engine .mono { display:block; font-size:7px; margin-bottom:10px; color:var(--muted) }
.route-engine b { font-size:13px; font-weight:500; color:var(--accent) }
.route-connector { color:var(--accent); font-size:20px; text-align:center }
.route-explanation { padding:25px; border:1px solid var(--line); border-radius:8px; background:var(--surface) }
.route-explanation .mono { color:var(--orange); font-size:8px }
.route-explanation p { margin-block:11px 24px; font-size:13px; line-height:1.9 }
.route-explanation p:last-child { margin-bottom:0 }
.experiment-note { font-size:10px; margin-block:23px; line-height:1.85; color:var(--muted) }
.signature-experiments .text-link { font-size:12px; color:var(--accent); display:flex; align-items:center; gap:20px; margin-top:auto }
.signature-experiments .text-link svg { height:17px; width:17px }
.lab-detour { display:flex; justify-content:space-between; gap:25px; border-top:1px solid var(--line); padding-top:24px; margin-top:30px; align-items:center }
.lab-detour>.mono { font-size:9px; color:var(--muted) }
.lab-detour a { font-size:12px; color:var(--accent) }
.signature-page .section-top>p { font-size:13px; max-width:330px; line-height:1.9 }
.signature-page .about-copy>p { font-size:14px; line-height:1.95 }
.signature-page .about-copy .about-lead { font-size:19px }
.signature-page .about-principles { font-size:13px }
.signature-page .tech-intro { font-size:15px }
.signature-page .tech-details p { font-size:13px }
.signature-page .service-list article>p { font-size:13px; line-height:1.9 }
.signature-page .service-detail-body p,.signature-page .service-detail-body li { font-size:13px }
.signature-page .service-detail-intro { font-size:15px }
.signature-page .process p { font-size:13px; line-height:1.9 }
.signature-page .note-grid p,.signature-page .frame-explainer>p { font-size:13px }
.signature-page .faq-list details>p { font-size:14px }
.signature-page .planner-copy>p { font-size:15px }
.signature-page .planner-summary { font-size:12px }
.signature-page .planner-status { font-size:11px }
.signature-page .contact-layout>div>p { font-size:14px }
.case-reader-bar { display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; color:var(--muted); font-size:11px }
.case-reader-bar button { padding:0; font-size:inherit }
.case-reader-bar a:hover,.case-reader-bar button:hover { color:var(--accent) }
.case-page .case-hero h1 { font-size:clamp(54px,6.8vw,93px) }
.case-page .case-panel p { font-size:14px }
.case-page .case-feature-grid { gap:20px }
.case-page .case-feature-grid article { border-radius:8px; background:transparent; border-top:2px solid var(--accent) }
.case-page .case-workflow li { padding-block:36px }
.case-page .case-evidence { font-size:12px }
.case-page .case-limits ul { font-size:13px }
.profile-main { padding-block:35px 60px }
.profile-toolbar { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:35px; font-size:12px }
.profile-toolbar .button { min-height:45px; padding:11px 19px; border:1px solid var(--line); font-size:11px }
.profile-sheet { background:var(--surface); padding:55px; border:1px solid var(--line); border-radius:12px; max-width:1050px; margin-inline:auto }
.profile-masthead { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:38px; color:var(--muted) }
.profile-masthead .mono { font-size:9px }
.profile-identity { display:flex; justify-content:space-between; align-items:center; gap:35px; margin-bottom:40px }
.profile-identity .eyebrow { font-size:9px; color:var(--orange) }
.profile-identity h1 { font-size:clamp(43px,5.5vw,68px); margin-block:22px }
.profile-identity p { font-size:15px }
.profile-monogram { position:relative; font-family:var(--display); font-size:84px; letter-spacing:-.12em; line-height:1; padding:25px 32px 32px 23px; border:1px solid var(--line); border-radius:50%; color:var(--accent) }
.profile-monogram>span { position:absolute; top:6px; right:7px; color:var(--orange); font-size:36px }
.profile-introduction { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.7fr); gap:45px; padding-block:30px; border-block:1px solid var(--line) }
.profile-sheet h2 { font-size:25px; letter-spacing:-.03em }
.profile-sheet p { font-size:13px; line-height:1.9 }
.profile-projects { padding-top:35px }
.profile-section-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:15px }
.profile-section-heading>.mono { font-size:8px; color:var(--muted) }
.profile-projects article { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:45px; padding-block:25px; border-bottom:1px solid var(--line) }
.profile-projects article .mono { font-size:9px; color:var(--muted); line-height:1.8 }
.profile-projects h3 { font-size:29px; margin-block:12px }
.profile-projects h3 span { color:var(--accent); font-size:22px }
.profile-projects article>div:last-child { padding-top:23px }
.profile-project-status { color:var(--muted); margin-top:20px; font-size:11px!important }
.profile-project-status a { color:var(--accent) }
.profile-offer { display:grid; grid-template-columns:1fr 1fr; gap:45px; padding-block:35px }
.profile-offer h2 { font-size:24px; margin-bottom:16px }
.profile-contact { border-top:1px solid var(--line); padding-top:30px; display:flex; justify-content:space-between; gap:30px; align-items:end }
.profile-contact .mono { font-size:8px; color:var(--orange); display:block; margin-bottom:15px }
.profile-email { display:block; font:22px var(--display); overflow-wrap:anywhere; direction:ltr; text-align:start }
.profile-domain { font-size:10px; color:var(--muted); overflow-wrap:anywhere; direction:ltr; display:block; margin-top:12px }
.profile-contact>div:last-child { display:flex; gap:18px; font-size:11px; color:var(--accent) }
.profile-print-note { text-align:center; font-size:11px; max-width:700px; margin:25px auto 0 }
html[data-reading=on] { scroll-behavior:auto }
html[data-reading=on] *,html[data-reading=on] *:before,html[data-reading=on] *:after { animation:none!important; transition:none!important }
html[data-reading=on] .cursor-arrow { display:none!important }
html[data-reading=on] [data-reveal] { opacity:1!important; transform:none!important }
html[data-reading=on] .project-art { transform:none!important }
html[data-reading=on] .signature-page .project-meta>p,html[data-reading=on] .signature-page .tech-intro,html[data-reading=on] .signature-page .tech-details p,html[data-reading=on] .signature-page .note-grid p,html[data-reading=on] .signature-page .faq-list details>p,html[data-reading=on] .case-page .case-panel p,html[data-reading=on] .case-page .case-limits ul { font-size:16px; line-height:2; color:var(--ink) }
::view-transition-group(root) { animation-duration:240ms }
html[data-motion=off]::view-transition-group(root),html[data-reading=on]::view-transition-group(root) { animation-duration:0s }
@keyframes benchFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes benchFlow { to { stroke-dashoffset:-48 } }
@media(max-width:1179px) {
  .main-nav { display:none; position:absolute; top:76px; left:0; right:0; padding:17px 32px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; font-size:14px; box-shadow:0 18px 30px #0002 }
  .main-nav.open { display:flex }
  .main-nav a,.nav-reading,.nav-explore { padding:12px 0 }
  .nav-contact { border:0; border-radius:0; padding:12px 0!important }
  .nav-row { height:76px; justify-content:space-between }
  .nav-tools { margin-inline-start:auto; gap:8px }
  .menu-toggle { display:grid }
  .nav-reading { font-size:14px }
  .signature-hero { gap:35px; padding-top:55px }
  .signature-hero h1 { font-size:clamp(59px,6.1vw,72px) }
  .signature-hero .hero-intro { font-size:14px }
  .signature-bench { padding:20px }
  .bench-scene { max-height:310px }
  .project-card,.project-card:first-child { gap:35px }
  .project-art,.project-card:first-child .project-art { height:340px }
  .work-toolbar { gap:12px }
  .filters button { padding:9px 12px; font-size:10px }
  .work-view-controls button { padding:9px 10px; font-size:9px }
  .signature-experiments>article { padding:27px }
  .profile-sheet { padding:40px }
}
@media(max-width:1000px) {
  .signature-hero { display:block }
  .signature-hero .hero-copy { max-width:620px; padding-top:0 }
  .signature-hero h1 { font-size:clamp(64px,8vw,84px) }
  .signature-hero .hero-intro { max-width:550px; font-size:15px }
  .signature-hero .hero-signature .mono { max-width:300px }
  .signature-bench { max-width:620px; margin:42px auto 0; padding:25px }
  .bench-scene { max-height:340px }
  .signature-hero .hero-bottom { margin-top:35px }
  .project-card,.project-card:first-child { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px }
  .system-art { padding-inline:21px }
  .system-nodes { gap:7px }
  .system-nodes button { padding:15px 9px; min-height:112px }
  .system-nodes button b { font-size:13px }
  .project-title h3,.project-card:first-child h3 { font-size:34px }
  .project-meta>p { font-size:13px }
  .route-presets button { font-size:8px; padding:10px }
  .conversion-route { gap:7px; grid-template-columns:minmax(0,1fr) 10px minmax(0,1.3fr) 10px minmax(0,1fr) }
  .route-engine b { font-size:11px }
  .route-end b { font-size:10px }
  .signature-experiments>article { padding:24px }
  .caption-screen .caption-overlay { font-size:12px; bottom:27px; left:7%; right:7% }
  .caption-screen .caption-overlay[lang=ar] { font-size:15px }
  .experiment-heading { display:block }
  .experiment-tag { display:block; margin-top:8px }
}
@media(max-width:800px) {
  .signature-experiments { grid-template-columns:1fr; gap:24px }
  .signature-experiments>article { padding:30px }
  .signature-experiments h3 { font-size:39px }
  .signature-experiments>article>p:not(.experiment-note) { max-width:650px; font-size:14px }
  .caption-screen { max-height:350px }
  .caption-screen .caption-overlay { font-size:16px; bottom:32px }
  .caption-screen .caption-overlay[lang=ar] { font-size:19px }
  .route-presets button { font-size:11px; padding:12px 16px }
  .conversion-route { gap:16px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1.3fr) 20px minmax(0,1fr) }
  .route-end { padding:24px 16px }
  .route-end b { font-size:14px }
  .route-engine b { font-size:16px }
  .experiment-heading { display:flex }
  .experiment-tag { margin:0 }
  .profile-projects article { gap:25px }
  .profile-introduction { grid-template-columns:1fr; gap:20px }
  .profile-monogram { font-size:67px }
  .profile-contact { align-items:start; flex-direction:column }
}
@media(max-width:680px) {
  .nav-row { height:70px }
  .main-nav { top:70px; padding:16px 20px }
  .nav-tools { gap:1px }
  .signature-hero { padding-top:37px }
  .signature-hero .eyebrow { font-size:8px; max-width:320px }
  .signature-hero h1 { font-size:clamp(49px,12vw,72px); letter-spacing:-.055em; margin-block:23px; line-height:1.15 }
  .hero-stop { margin-inline-start:8px; font-size:.44em }
  .signature-hero .hero-intro { font-size:14px; max-width:460px }
  .signature-hero .hero-actions { margin-top:25px; gap:18px }
  .signature-hero .hero-actions .button { font-size:12px; gap:21px; padding:14px 19px }
  .signature-hero .play-link { font-size:11px; max-width:160px }
  .signature-hero .hero-depth-links { font-size:10px; gap:11px 22px; margin-top:21px }
  .signature-hero .signature { font-size:30px }
  .signature-hero .hero-signature { margin-top:28px; gap:17px }
  .signature-hero .hero-signature .mono { font-size:7px; max-width:180px; padding-inline-start:17px }
  .signature-bench { margin-top:33px; padding:18px; border-radius:12px; width:100% }
  .bench-heading>.mono { font-size:8px }
  .bench-indicator { font-size:8px; gap:6px }
  .bench-scene { max-height:300px; margin-block:0 }
  .bench-projects { padding:5px; gap:5px }
  .bench-projects button { font-size:10px; padding:11px 7px; gap:6px }
  .bench-projects button>.mono { font-size:7px }
  #bench-study { font-size:16px }
  .bench-caption { font-size:7px; line-height:1.8; max-width:220px }
  .bench-bottom { gap:13px; margin-top:17px }
  .signature-bench .lab-core { width:62px; height:58px; border-radius:6px }
  .signature-bench .lab-core>svg { width:19px; height:19px }
  .signature-bench .lab-step { font-size:6px }
  .signature-bench .lab-caption { margin-top:16px }
  .signature-bench .lab-caption .mono { font-size:6px }
  .signature-hero .hero-bottom { margin-top:25px; padding-block:20px }
  .signature-hero .hero-bottom>.mono { font-size:7px }
  .signature-hero .scroll-cue { font-size:10px }
  .project-card,.project-card:first-child { display:block; padding-block:28px; margin:0 }
  .project-card:first-child { padding-top:0 }
  .project-art,.project-card:first-child .project-art { height:290px; margin-bottom:25px }
  .project-meta { padding:0 }
  .project-meta .eyebrow { font-size:9px }
  .project-title { padding-block:15px }
  .project-title h3,.project-card:first-child h3 { font-size:32px }
  .project-meta>p { font-size:13px; line-height:1.95; max-width:none }
  .project-footer,.project-card:first-child .project-footer { margin-top:20px; padding-top:16px; gap:13px }
  .project-footer .mono,.project-card:first-child .project-footer .mono { max-width:none; font-size:9px }
  .project-footer .text-link,.project-card:first-child .project-footer .text-link { font-size:11px }
  .project-case-link { font-size:12px; margin-top:20px }
  .work-toolbar { display:flex; align-items:start; flex-direction:column; margin-bottom:28px; gap:15px; padding-bottom:0 }
  .filters button { padding:9px 10px; font-size:10px }
  .work-view-controls { margin:0; padding:4px }
  .work-view-controls button { padding:10px 13px; font-size:10px }
  .system-art { padding:65px 21px 25px; min-height:370px }
  .system-nodes { grid-template-columns:1fr; gap:8px }
  .system-nodes button { display:grid; grid-template-columns:20px minmax(0,1fr) 18px; gap:10px; align-items:center; padding:13px; min-height:49px }
  .system-nodes button b { font-size:13px }
  .system-node-arrow { position:static }
  .system-description { font-size:12px; margin-top:19px }
  .system-kicker { margin-bottom:19px; font-size:8px }
  .system-boundary { font-size:7px; line-height:1.9 }
  .signature-experiments>article { padding:24px }
  .signature-experiments h3 { font-size:34px }
  .signature-experiments>article>p:not(.experiment-note) { font-size:13px }
  .experiment-heading { display:flex; margin-bottom:23px }
  .experiment-heading>.mono { font-size:8px }
  .experiment-tag { font-size:9px }
  .caption-screen { margin-top:22px }
  .caption-screen-label { font-size:6px; top:10px; left:10px }
  .caption-screen .caption-overlay { font-size:12px; padding:7px; bottom:25px; left:6%; right:6% }
  .caption-screen .caption-overlay[lang=ar] { font-size:14px }
  .caption-time { font-size:7px; bottom:7px; right:9px }
  .caption-controls select { font-size:16px; padding:8px 10px; min-width:130px }
  .caption-controls label,.caption-range-label { font-size:10px }
  .caption-source { padding:14px; font-size:9px; min-height:93px }
  .experiment-note { font-size:10px }
  .signature-experiments .text-link { font-size:11px }
  .route-presets { gap:7px; margin-top:23px }
  .route-presets button { font-size:9px; padding:11px 10px; flex:1; white-space:nowrap }
  .conversion-route { gap:7px; grid-template-columns:minmax(0,1fr) 9px minmax(0,1.25fr) 9px minmax(0,1fr); margin-block:27px }
  .route-end { padding:18px 7px }
  .route-end b { font-size:10px }
  .route-end small { font-size:8px }
  .route-engine b { font-size:11px }
  .route-engine .mono { font-size:6px }
  .route-connector { font-size:16px }
  .route-explanation { padding:20px }
  .route-explanation p { font-size:12px }
  .lab-detour { align-items:start; flex-direction:column; gap:12px }
  .lab-detour a { font-size:11px }
  .signature-page .section-top>p { font-size:13px; max-width:440px }
  .signature-page .about-copy>p { font-size:13px }
  .signature-page .about-copy .about-lead { font-size:18px }
  .signature-page .about-principles { font-size:12px }
  .signature-page .tech-intro { font-size:14px }
  .signature-page .tech-details p { font-size:13px }
  .signature-page .service-detail-intro { font-size:14px }
  .signature-page .faq-list details>p { font-size:13px }
  .signature-page .planner-copy>p { font-size:14px }
  .signature-page .contact-layout>div>p { font-size:13px }
  .case-reader-bar { font-size:10px; gap:15px; line-height:1.7 }
  .case-page .case-hero h1 { font-size:clamp(40px,10vw,62px) }
  .case-page .case-panel p { font-size:13px }
  .case-page .case-evidence { font-size:11px }
  .case-page .case-limits ul { font-size:12px }
  .profile-main { padding-top:25px }
  .profile-toolbar { gap:18px; font-size:10px; margin-bottom:25px }
  .profile-toolbar .button { font-size:10px; padding:10px 13px; min-height:42px }
  .profile-sheet { padding:23px }
  .profile-masthead { margin-bottom:26px; padding-bottom:18px; gap:12px }
  .profile-masthead .mono { font-size:7px }
  .profile-identity { display:block; margin-bottom:28px }
  .profile-identity .eyebrow { font-size:8px }
  .profile-identity h1 { font-size:43px; line-height:1.2; margin-block:20px }
  .profile-identity p { font-size:13px }
  .profile-monogram { display:none }
  .profile-introduction { padding-block:24px }
  .profile-sheet h2 { font-size:24px }
  .profile-sheet p { font-size:12px }
  .profile-section-heading { display:block }
  .profile-section-heading>.mono { display:block; margin-top:12px }
  .profile-projects { padding-top:25px }
  .profile-projects article { grid-template-columns:1fr; gap:0; padding-block:24px }
  .profile-projects h3 { font-size:26px }
  .profile-projects article>div:last-child { padding-top:18px }
  .profile-project-status { margin-top:10px }
  .profile-offer { grid-template-columns:1fr; gap:27px; padding-block:26px }
  .profile-contact { padding-top:25px; gap:23px }
  .profile-email { font-size:17px; line-height:1.5 }
  .profile-domain { font-size:9px; line-height:1.8 }
  .profile-contact>div:last-child { flex-wrap:wrap; font-size:11px; gap:22px }
  .profile-print-note { font-size:10px }
  html[dir=rtl] .signature-hero h1 { font-size:clamp(38px,9vw,52px); letter-spacing:0; line-height:1.35 }
}
@media(max-width:360px) {
  .signature-hero h1 { font-size:47px }
  .signature-hero .hero-actions { gap:15px }
  .signature-hero .hero-actions .button { padding:14px 16px; font-size:11px }
  .signature-hero .play-link { max-width:128px; font-size:10px }
  .signature-bench { padding:15px }
  .bench-heading>.mono,.bench-indicator { font-size:7px }
  .bench-projects button { font-size:9px; gap:5px; padding:10px 5px }
  .bench-projects button>.mono { font-size:6px }
  #bench-study { font-size:14px }
  .bench-caption { font-size:6px }
  .signature-bench .lab-core { width:57px }
  .signature-experiments>article { padding:19px }
  .experiment-tag { font-size:8px }
  .signature-experiments h3 { font-size:31px }
  .caption-screen .caption-overlay { font-size:11px }
  .caption-screen .caption-overlay[lang=ar] { font-size:12px }
  .route-presets button { font-size:8px; padding:11px 8px }
  .route-engine b { font-size:10px }
  .profile-sheet { padding:19px }
  .profile-identity h1 { font-size:38px }
  .profile-email { font-size:15px }
}
@media(prefers-reduced-motion:reduce) {
  .bench-floating,.bench-wire { animation:none }
  ::view-transition-group(root) { animation-duration:0s }
}
html[data-motion=off] .bench-floating,html[data-motion=off] .bench-wire { animation:none }