/* Refinement of the existing Onyx visual system. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --copy-secondary: #beb5cc;
  --copy-quiet: #aaa0b9;
  --field-error: #ffb6c4;
}
html { scrollbar-color: #716780 var(--bg); }
body { overflow-wrap: break-word; }
input, select, textarea { caret-color: var(--lime); }
.site-header { padding-top: max(27px, env(safe-area-inset-top, 0px)); }
.motion-toggle { width: 44px; height: 44px; }
.intro h1 { font-size: clamp(55px, 6.2vw, 96px); line-height: 1.17; letter-spacing: -.03em; }
.intro>p { font-size: clamp(16px, 1.2vw, 18px); color: var(--copy-secondary); }
.intro-actions { gap: 24px; }
.intro .eyebrow { font-size: 12px; color: var(--copy-secondary); }
.intro .tiny { font-size: 11px; color: var(--copy-quiet); }
.primary-link, .text-link, .capsule a { min-height: 44px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.primary-link { font-size: 14px; }
.capsule a { transition: background 160ms ease; }
.primary-link, .submit-btn, .project-live-link, .motion-toggle {
  transition: background 160ms ease, transform 140ms var(--ease-out);
}
.primary-link:active, .submit-btn:active, .project-live-link:active, .motion-toggle:active { transform: scale(.97); }
.scene-rail { gap: 4px; }
.scene-rail button { min-height: 44px; padding: 9px 10px; margin-inline: -10px; font-size: 13px; color: #c0b6d1; }
.scene-rail button.active { color: var(--lime); }
.rail-title { font-size: 12px; color: #d1c8de; margin-bottom: 6px; }
.scene-rail>a { min-height: 44px; font-size: 12px; }
.gallery-hint { color: var(--copy-secondary); font-size: 13px; margin-top: 10px; }
.gallery-heading .eyebrow { font-size: 11px; color: var(--copy-secondary); }
.scroll-cue { min-height: 44px; font-size: 12px; }
.scene-counter { font-variant-numeric: tabular-nums; font-size: 11px; }
.card-topline { font-size: 11px; letter-spacing: 0; line-height: 1.5; }
.card-bottom { font-size: 11px; }
.card-bottom>span:last-child { font-size: 12px; }
.afek-brand-caption, .inbar-signature { font-size: 11px; }
.service-no { font-size: 11px; }
h2, .footer-wordmark { letter-spacing: -.035em; }
.studio-intro .small-copy, .section-index, .service-en, .availability { color: var(--copy-quiet); }
.service-list p, .process-grid p, .faq-items details p, .contact-layout>div>p { color: var(--copy-secondary); }
.faq-items summary { min-height: 44px; }
.service-list>a { transition: background 180ms ease, border-color 180ms ease; }
.service-list>a:hover { padding-inline: 22px; }
.dialog-close { width: 44px; height: 44px; }
dialog { overscroll-behavior: contain; scrollbar-gutter: stable; }
.dialog-footer p { color: var(--copy-secondary); font-size: 13px; line-height: 1.8; }
.dialog-meta { color: #c6b6df; }
.form-wrap { min-width: 0; }
.form-row { min-width: 0; }
label { font-size: 13px; color: var(--copy-secondary); min-width: 0; }
input, select, textarea { font-size: 16px; min-width: 0; transition: border-color 160ms ease; }
input::placeholder, textarea::placeholder { color: #a79ab7; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
input[aria-invalid="true"] { border-bottom-color: var(--field-error); }
#form-err { font-size: 14px; line-height: 1.8; color: var(--field-error); }
.required-note { font-size: 12px; color: var(--copy-quiet); }
.form-note { font-size: 12px; color: var(--copy-quiet); }
.optional { font-size: 12px; opacity: 1; color: var(--copy-quiet); }
.email-link { min-height: 44px; font-size: 14px; max-width: 100%; }
.footer-bottom { font-size: 12px; color: var(--copy-quiet); }
.footer-bottom>a { min-height: 44px; }
html.hc .primary-link, html.hc .primary-link span, html.hc .submit-btn, html.hc .submit-btn span { color: #000 !important; }
html.hc .scene-rail button { color: #fff; }
html.hc .scene-rail button.active { color: #ffec60; }
html.hc .project-card.inbar-real span { color: #81001a !important; }
@media (hover: none), (pointer: coarse) {
  .primary-link:hover { transform: none; background: var(--lime); }
  .primary-link:active { transform: scale(.97); }
  .service-list>a:hover { background: linear-gradient(110deg,#17121eeb,#17101ce6); }
  .service-list>a:hover .service-arrow { background: transparent; color: inherit; }
  .project-card:hover .card-orbit { background: transparent; rotate: none; }
}
@media (max-width: 1000px) and (min-width: 651px) {
  .intro h1 { font-size: clamp(47px, 6.3vw, 63px); }
  .process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .site-header { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .brand { font-size: 18px; gap: 5px; }
  .capsule a { padding: 8px 11px; font-size: 12px; }
  .intro h1 { font-size: clamp(44px, 12vw, 72px); letter-spacing: -.03em; line-height: 1.13; }
  .intro .eyebrow { font-size: 11px; margin-bottom: 16px; }
  .intro>p { font-size: 14px; line-height: 1.8; margin-top: 20px; }
  .intro-actions { gap: 14px; margin-top: 22px; flex-wrap: wrap; }
  .primary-link { font-size: 13px; padding: 12px 15px; gap: 12px; }
  .text-link { font-size: 12px; gap: 0; }
  .scene-rail { gap: 8px; left: 5%; right: 5%; }
  .scene-rail button { font-size: 12px; padding: 9px 6px; margin: 0; gap: 5px; }
  .gallery-heading { top: 16%; }
  .gallery-heading h2 { font-size: 25px; }
  .gallery-hint { font-size: 12px; margin-top: 5px; }
  .card-topline { font-size: 11px; }
  .card-topline>span:first-child { max-width: calc(100% - 38px); }
  .card-bottom { min-height: 48px; padding: 12px 18px; justify-content: flex-start; }
  .card-bottom>span:first-child { display: none; }
  .card-bottom>span:last-child { font-size: 12px; }
  .afek-brand-caption, .inbar-signature { font-size: 11px; }
  .scene-bottom { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .scroll-cue { font-size: 11px; padding-left: 48px; }
  .service-list>a:hover { padding-inline: 14px; }
  .service-list p { font-size: 13px; }
  .studio-intro .small-copy { font-size: 14px; }
  .process-grid p, .faq-items details p, .contact-layout>div>p { font-size: 14px; }
  .section-heading .eyebrow, .section-index, .availability { font-size: 11px; }
  .form-wrap { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 24px; }
  #lead { gap: 24px; }
  .email-link { font-size: 13px; }
  .dialog-footer p { font-size: 13px; }
  .dialog-footer .project-live-link { margin-bottom: 16px; }
  .a11y { bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 651px) {html.viewport-below-650 .intro h1{ font-size: clamp(40px, 9vh, 64px); }html.viewport-below-650 .intro .eyebrow{ margin-bottom: 16px; }html.viewport-below-650 .intro>p{ margin-top: 16px; }html.viewport-below-650 .intro-actions{ margin-top: 20px; }
}
@media (max-width: 380px) {
  .brand { font-size: 16px; }
  .brand-mark { display: none; }
  .capsule a { white-space: nowrap; gap: 6px; padding-inline: 9px; font-size: 11px; }
  .intro .eyebrow { font-size: 11px; }
  .intro>p { font-size: 13px; }
  .intro-actions { gap: 10px; }
  .intro-actions .primary-link { font-size: 12px; gap: 8px; padding-inline: 12px; }
  .intro-actions .primary-link .icon-arrow { width: 17px; height: 17px; }
  .intro-actions .text-link { font-size: 11px; }
  .intro-actions .text-link span { margin-right: 0; }
  .intro-actions .text-link .icon-arrow { width: 12px; height: 12px; }
}
@media (max-width: 650px) {html.viewport-below-550 .world{ min-height: 100svh; }html.viewport-below-550 .intro{ bottom: 13%; }html.viewport-below-550 .intro h1{ font-size: 36px; }html.viewport-below-550 .intro>p{ margin-top: 10px; font-size: 12px; }html.viewport-below-550 .intro-actions{ margin-top: 12px; }html.viewport-below-550 .intro .eyebrow{ margin-bottom: 10px; }html.viewport-below-550 .deck .project-card{ min-height: 240px; height: 58svh; }html.viewport-below-550 .gallery-heading{ top: 20%; }html.viewport-below-550 .gallery-hint{ display: none; }html.viewport-below-550 .scene-rail{ bottom: 9%; }html.viewport-below-550 .motion-toggle{ top: 78px; }
}