/* Onyx: continuous motion, real work, and direct contact with its maker. */
:root { --studio-accent:#e0f4b3; --project-rgb:154,210,184; }
h2,.footer-wordmark { letter-spacing:-.03em; }
.intro h1 { letter-spacing:-.03em; }
.gradient-word { background:none; -webkit-text-fill-color:var(--ink); color:var(--ink); }
.intro .gradient-word { -webkit-text-fill-color:var(--lime); color:var(--lime); }
.intro-location { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--copy-secondary); margin-bottom:25px; }
.intro-location .tiny { font-size:12px; }
.hero-peek { display:none; }
body[data-work-theme="torim"] { --project-rgb:127,218,174; }
body[data-work-theme="afek"] { --project-rgb:142,175,229; }
body[data-work-theme="inbar"] { --project-rgb:223,165,168; }
.project-light { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 65%,rgba(var(--project-rgb),.13),transparent 63%); opacity:var(--unfold,0); transition:background 250ms ease; }
.gallery-aperture { position:absolute; z-index:1; left:50%; top:50%; width:min(59vw,810px); height:min(61vh,590px); min-height:400px; border:1px solid rgba(var(--project-rgb),.4); border-radius:calc(180px - var(--unfold,0)*156px); transform:translate(-50%,-50%) rotate(calc(-28deg + var(--unfold,0)*28deg)) scale(calc(.65 + var(--unfold,0)*.35)); opacity:calc(var(--unfold,0)*.55); pointer-events:none; }
.gallery-aperture span,.gallery-aperture i { position:absolute; width:7px; height:7px; border-radius:50%; background:rgb(var(--project-rgb)); top:16%; left:-4px; }
.gallery-aperture i { top:auto; left:auto; right:-4px; bottom:16%; }
.gallery-heading { top:12%; }
.gallery-heading h2 { font-size:clamp(25px,2.5vw,36px); margin:0; }
.gallery-current { display:flex; align-items:baseline; gap:14px; margin-top:14px; font-size:13px; }
.gallery-current span { font:12px var(--english); color:var(--copy-quiet); font-variant-numeric:tabular-nums; }
.gallery-current b { color:rgb(var(--project-rgb)); font-weight:500; }
.global-scene { transition:opacity 350ms ease; }
.reading-content .global-scene { opacity:.28; }
.studio,.faq,.contact,.process { background:#0c0b11b0; }
.section-pad { padding-block:110px; }
.studio-intro { margin-bottom:60px; }
.studio-intro h2 { font-size:clamp(38px,4.6vw,66px); }
.service-list>a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 230px 44px; gap:44px; padding:30px 0; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }
.service-list>a:last-child { border-bottom:1px solid var(--line); }
.service-list>a:hover,.service-list>a:focus-visible { padding-inline:0; background:transparent; }
.service-list h3 { font-size:clamp(20px,2vw,29px); font-weight:500; line-height:1.5; }
.service-list p { font-size:15px; margin-top:8px; max-width:44ch; }
.service-action { display:inline-block; color:var(--lime); font-size:13px; margin-top:18px; text-decoration:underline; text-underline-offset:5px; }
.service-example { margin:0; min-width:0; opacity:.62; transform:translateY(4px); transition:opacity 180ms ease,transform 200ms var(--ease-out); }
.service-example img { display:block; width:100%; height:130px; object-fit:cover; object-position:top; border-radius:6px; }
.service-example figcaption { font-size:12px; line-height:1.7; color:var(--copy-secondary); margin-top:9px; }
.service-list>a:is(:hover,:focus-visible) .service-example { opacity:1; transform:none; }
.service-arrow { width:44px; height:44px; border:1px solid var(--line); display:grid; place-items:center; border-radius:50%; transition:color 160ms ease,background 160ms ease; }
.service-list>a:is(:hover,:focus-visible) .service-arrow { color:#171b12; background:var(--lime); }
.maker { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; border-block:1px solid var(--line); background:#14151bd9; }
.maker-name { direction:ltr; color:var(--lime); font:500 clamp(60px,7.5vw,110px)/.98 var(--english); letter-spacing:-.04em; }
.maker-name>span { display:block; }
.maker-name svg { display:block; width:82px; height:82px; margin-top:32px; fill:none; stroke:currentColor; stroke-width:1; }
.maker-copy h2 { font-size:clamp(36px,3.6vw,52px); margin-bottom:26px; }
.maker-copy p { font-size:16px; color:var(--copy-secondary); max-width:55ch; }
.maker-copy p+p { margin-top:16px; }
.maker-copy .text-link { margin-top:26px; color:var(--lime); }
.process>h2 { margin-bottom:65px; }
.process-journey { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10%; align-items:start; }
.process-visual { position:sticky; top:150px; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; }
.process-orbit { position:absolute; inset:5% 7% 12%; border:1px solid #e0f4b34d; border-radius:45%; transform:rotate(-12deg); pointer-events:none; }
.process-window { position:relative; width:100%; }
.process-window img { width:100%; height:auto; display:block; border-radius:9px; border:5px solid #292833; margin:22px 0; }
.process-visual-title,.process-visual-end { font-size:22px; line-height:1.5; display:block; }
.process-visual-end { text-align:end; color:var(--lime); }
.process-phases { display:flex; width:100%; justify-content:space-between; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); }
.process-phases span { font-size:13px; color:var(--copy-quiet); }
.process-phases span.is-current { color:var(--lime); }
.process-grid { position:relative; display:block; padding-inline-start:34px; }
.process-grid:before { content:''; position:absolute; inset-inline-start:4px; top:12px; bottom:80px; width:1px; background:var(--line); }
.process-grid:after { content:''; position:absolute; inset-inline-start:4px; top:12px; height:calc(100% - 92px); width:1px; transform:scaleY(var(--journey,0)); transform-origin:top; background:var(--lime); }
.process-grid article { position:relative; padding:0 0 56px; min-height:0; border:0; background:none; box-shadow:none; border-radius:0; }
.process-grid article:before { content:''; position:absolute; inset-inline-start:-35px; top:7px; width:11px; height:11px; border:1px solid #a89bb8; border-radius:50%; background:#100e17; z-index:1; }
.process-grid article.is-current:before { background:var(--lime); border-color:var(--lime); }
.process-grid article>span { font-size:13px; color:var(--copy-quiet); }
.process-grid article.is-current>span { color:var(--lime); }
.process-grid h3 { font-size:26px; line-height:1.5; margin:12px 0; }
.process-grid p { font-size:16px; max-width:44ch; }
.process-grid article:last-child { padding-bottom:0; }
.case-story { padding:4px 44px 32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.case-story>div { border-top:1px solid var(--line); padding-top:18px; }
.case-story h3 { font-weight:500; font-size:18px; color:var(--case-accent); margin:0 0 10px; }
.case-story p { font-size:14px; line-height:1.85; color:var(--copy-secondary); }
.contact-context { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:#e0f4b312; border-radius:5px; }
.contact-context>span { font-size:13px; color:var(--lime); }
.contact-context button { min-width:44px; min-height:44px; padding:8px; background:none; color:var(--copy-secondary); text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.contact h2 { font-size:clamp(55px,6vw,84px); }
.contact h2 .gradient-word { color:var(--lime); -webkit-text-fill-color:var(--lime); }
.faq-items details { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0; padding:22px 0!important; }
.faq-items summary { font-size:18px; line-height:1.6; }
.faq-items details p { font-size:16px; }
.section-index,.service-no,.card-topline,.card-bottom,.scene-counter { font-size:12px; }
@media(hover:none),(pointer:coarse) { .service-example { opacity:1; transform:none; } .service-list>a:hover { background:none; padding-inline:0; } }
@media(max-width:1000px) { .service-list>a { grid-template-columns:minmax(0,1fr) 190px 44px; gap:24px; } .maker { gap:7%; } .process-journey { gap:7%; } .process-visual { min-height:340px; } .process-window img { margin:18px 0; } }
@media(max-width:650px) {
 .intro { top:23%; bottom:auto; right:7%; left:7%; transform:none; }
 .intro-location { margin-bottom:17px; font-size:12px; }
 .intro-location .tiny { display:none; }
 .intro h1 { font-size:clamp(42px,11.6vw,65px); line-height:1.12; }
 .intro>p { font-size:14px; margin-top:18px; }
 .intro-actions { margin-top:22px; gap:16px; }
 .intro-actions .text-link { font-size:12px; }
 .hero-peek { position:relative; display:flex; align-items:center; gap:12px; margin-top:25px; padding-top:16px; border-top:1px solid var(--line); width:100%; }
 .hero-peek img { width:88px; height:52px; object-fit:cover; object-position:top; border-radius:4px; }
 .hero-peek span { font-size:12px; color:var(--copy-secondary); display:flex; gap:12px; align-items:center; }
 .hero-peek .icon-arrow { width:15px; height:15px; }
 .scene-rail { bottom:9%; }
 .gallery-heading { top:18%; right:7%; }
 .gallery-heading h2 { font-size:27px; }
 .gallery-current { gap:12px; margin-top:9px; }
 .gallery-aperture { width:92%; height:55svh; min-height:345px; }
 .section-pad { padding-block:72px; }
 .studio-intro { margin-bottom:40px; }
 .studio-intro h2 { font-size:39px; }
 .service-list>a { grid-template-columns:minmax(0,1fr) 44px; gap:16px; padding-block:25px; }
 .service-list h3 { font-size:22px; }
 .service-list p { font-size:14px; }
 .service-arrow { grid-column:2; grid-row:1; align-self:start; }
 .service-example { grid-column:1/-1; width:100%; opacity:1; transform:none; }
 .service-example img { height:auto; max-height:220px; object-fit:cover; object-position:top; }
 .service-example figcaption { font-size:12px; }
 .service-action { font-size:13px; margin-top:12px; }
 .maker { grid-template-columns:1fr; gap:38px; }
 .maker-name { font-size:70px; display:flex; justify-content:space-between; align-items:end; }
 .maker-name svg { width:62px; height:62px; margin:0 0 4px; }
 .maker-copy h2 { font-size:38px; margin-bottom:22px; }
 .maker-copy p { font-size:15px; }
 .process>h2 { font-size:43px; margin-bottom:30px; }
 .process-journey { grid-template-columns:1fr; gap:44px; }
 .process-visual { position:relative; top:auto; min-height:0; padding:12px 0 0; max-width:420px; }
 .process-window { width:90%; }
 .process-window img { margin:15px 0; }
 .process-visual-title,.process-visual-end { font-size:19px; }
 .process-phases { margin-top:26px; }
 .process-grid { padding-inline-start:31px; }
 .process-grid article:before { inset-inline-start:-32px; }
 .process-grid article { padding-bottom:38px; }
 .process-grid h3 { font-size:24px; }
 .process-grid p { font-size:15px; }
 .case-story { grid-template-columns:1fr; padding:0 22px 28px; gap:22px; }
 .faq-items summary { font-size:17px; }
 .faq-items details p { font-size:15px; }
 .contact h2 { font-size:57px; }
}
@media(max-width:380px) { .intro { top:22%; } .intro h1 { font-size:39px; } .intro>p { font-size:13px; } .intro-actions { gap:10px; } .intro-actions .text-link { font-size:11px; } .hero-peek { margin-top:19px; padding-top:12px; } .hero-peek img { width:70px; height:43px; } .hero-peek span { font-size:11px; } }
@media(max-width:650px) {html.viewport-below-700 .intro{ top:21%; }html.viewport-below-700 .intro h1{ font-size:39px; }html.viewport-below-700 .intro-location{ margin-bottom:12px; }html.viewport-below-700 .intro>p{ margin-top:12px; }html.viewport-below-700 .intro-actions{ margin-top:15px; }html.viewport-below-700 .hero-peek{ margin-top:15px; }html.viewport-below-700 .hero-peek img{ height:38px; width:65px; }html.viewport-below-700 .scene-rail{ bottom:8%; } }
@media(max-width:650px) {html.viewport-below-550 .intro{ top:24%; }html.viewport-below-550 .intro h1{ font-size:32px; }html.viewport-below-550 .intro-location{ display:none; }html.viewport-below-550 .intro>p{ font-size:12px; margin-top:10px; }html.viewport-below-550 .intro-actions{ margin-top:10px; }html.viewport-below-550 .hero-peek{ display:none; }html.viewport-below-550 .gallery-current,html.viewport-below-550 .gallery-hint{ display:none; } }
@media(prefers-reduced-motion:reduce) { .global-scene,.service-example { transition:none; } .gallery-aperture { transform:translate(-50%,-50%); border-radius:24px; } }
html.reduce-motion .gallery-aperture,html.nomotion .gallery-aperture { transform:translate(-50%,-50%); border-radius:24px; }
html.hc .maker-name,html.hc .service-action,html.hc .contact-context>span { color:#ffec60; }
html.hc .gradient-word { color:#fff; -webkit-text-fill-color:#fff; }

.project-light { background:radial-gradient(ellipse at 50% 65%,#7fdaae18,transparent 63%); }
.project-light:before,.project-light:after { content:'';position:absolute;inset:0;opacity:0;transition:opacity 280ms ease; }
.project-light:before { background:radial-gradient(ellipse at 50% 65%,#8eafe527,transparent 63%); }
.project-light:after { background:radial-gradient(ellipse at 50% 65%,#dfa5a82b,transparent 63%); }
body[data-work-theme="afek"] .project-light:before,body[data-work-theme="inbar"] .project-light:after { opacity:1; }
.gallery-aperture { transition:border-color 220ms ease; }
html.reduce-motion .project-light:before,html.reduce-motion .project-light:after,html.reduce-motion .gallery-aperture,html.nomotion .project-light:before,html.nomotion .project-light:after { transition:none; }
.gallery-current span { direction:ltr; unicode-bidi:isolate; }
/* Keep framed screens within their own area, clear of project identity text. */
.visual-project .phone-device { height:100%; max-height:100%; width:auto; aspect-ratio:375/844; bottom:0; }
@media(max-width:650px) {
 .visual-project .project-showcase { top:43%; bottom:18%; }
 .visual-project .project-identity { top:18%; }
 .visual-project .project-kind { line-height:1.6; }
 .gallery-heading { top:16%; }
 .gallery-current { display:none; }
}
@media(max-width:650px){html.viewport-below-700 .deck .visual-project{ height:46svh; min-height:260px; }html.viewport-below-700 .visual-project .project-identity{ top:20%; }html.viewport-below-700 .visual-project .project-name{ font-size:21px; }html.viewport-below-700 .visual-project .project-showcase{ top:46%; bottom:23%; }
}
@media(max-width:650px){html.viewport-below-550 .deck .visual-project{ min-height:240px; }html.viewport-below-550 .visual-project .project-kind{ display:block; font-size:11px; }html.viewport-below-550 .visual-project .project-name{ font-size:18px; }html.viewport-below-550 .gallery-heading{ top:20%; }
}
