/* NETAL — core design system */
:root {
  --orange: #ec7c3c;
  --orange-bright: #ff955b;
  --ink: #0b0c0d;
  --surface: #111315;
  --surface-2: #171a1d;
  --surface-3: #202428;
  --line: #2a2e32;
  --paper: #f3f0ea;
  --white: #fff;
  --muted: #a5a8aa;
  --muted-light: #6d7073;
  --success: #67c68a;
  --danger: #ff7e72;
  --font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --step--1: clamp(.84rem, .82rem + .1vw, .92rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.1rem);
  --step-1: clamp(1.22rem, 1.12rem + .4vw, 1.52rem);
  --step-2: clamp(1.75rem, 1.35rem + 1.25vw, 2.55rem);
  --step-3: clamp(2.35rem, 1.65rem + 2.6vw, 4.2rem);
  --step-4: clamp(3rem, 1.8rem + 4.5vw, 6.4rem);
  --space-1: .5rem;
  --space-2: .85rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: clamp(4.5rem, 8vw, 8.5rem);
  --container: 1280px;
  --header-height: 74px;
  --radius-sm: 3px;
  --radius: 8px;
  --shadow: 0 28px 70px rgb(0 0 0 / .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
svg { width: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--step-3); letter-spacing: -.045em; }
h1 { line-height: 1.02; }
h2 { font-size: var(--step-2); line-height: 1.1; letter-spacing: -.035em; }
h3 { font-size: var(--step-1); line-height: 1.16; letter-spacing: -.02em; }
p { max-width: 66ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--orange-bright); outline-offset: 4px; }
::selection { background: var(--orange); color: var(--ink); }

.container { width: min(calc(100% - 2.25rem), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-6); border-block-start: 1px solid var(--line); }
.section-muted { background: var(--surface); }
.section-contrast { background: var(--paper); color: var(--ink); }
.section-action { display: flex; justify-content: flex-end; margin-block-start: var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 1000; padding: .7rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.eyebrow { margin-block-end: var(--space-3); color: var(--orange); font: 700 var(--step--1)/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.section-heading { max-width: 780px; margin-block-end: var(--space-5); }
.section-heading h2 { margin-block-end: var(--space-3); }
.section-heading > p:last-child { color: var(--muted); }
.section-contrast .section-heading > p:last-child, .section-contrast .eyebrow { color: #7d3b17; }
.lead { font-size: var(--step-1); max-width: 34ch; }

.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1.2rem; border: 1px solid var(--orange); border-radius: var(--radius-sm); background: var(--orange); color: var(--ink); font-weight: 750; line-height: 1.2; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); }
.button svg, .text-link svg { transition: transform .25s var(--ease); }
.button:hover { background: var(--orange-bright); border-color: var(--orange-bright); transform: translateY(-2px); }
.button:hover svg, .text-link:hover svg { transform: translateX(4px); }
[dir="rtl"] .button:hover svg, [dir="rtl"] .text-link:hover svg { transform: translateX(-4px) rotate(180deg); }
[dir="rtl"] .button svg, [dir="rtl"] .text-link svg { transform: rotate(180deg); }
.button-small { min-height: 42px; padding: .65rem .9rem; font-size: var(--step--1); }
.button-ghost { background: transparent; color: var(--paper); border-color: #777; }
.button-ghost:hover { color: var(--ink); }
.section-contrast .button-ghost { color: var(--ink); border-color: #888; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; color: var(--orange-bright); font-weight: 750; }

/* Header */
.site-header { position: sticky; inset-block-start: 0; z-index: 100; height: var(--header-height); border-block-end: 1px solid rgb(255 255 255 / .08); background: rgb(11 12 13 / .78); backdrop-filter: blur(18px); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-scrolled { background: rgb(11 12 13 / .94); box-shadow: 0 12px 34px rgb(0 0 0 / .28); }
.header-inner { width: min(calc(100% - 2rem), 1480px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.4rem); }
.brand { display: inline-flex; align-items: baseline; gap: .42rem; white-space: nowrap; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.brand span { font-size: 1.18rem; }
.brand small { color: var(--muted); font-size: .56rem; letter-spacing: .16em; }
.brand i { color: var(--orange); font-style: normal; font-size: 1.4rem; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(.7rem, 1.3vw, 1.4rem); margin-inline: auto; }
.nav-link { position: relative; padding-block: .6rem; color: #d0d1d2; font-size: .88rem; white-space: nowrap; }
.nav-link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: .2rem; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: .85rem; }
.language-switcher { display: flex; gap: .45rem; font: 650 .72rem/1 var(--font-mono); }
.language-switcher a { color: #8b8d8f; }
.language-switcher a:hover, .language-switcher a.active { color: var(--orange-bright); }
.portal-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: #dedede; }
.portal-link svg { width: 1rem; }
.menu-button { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.menu-button svg { width: 22px; }
.mobile-menu { position: absolute; inset-inline: 0; inset-block-start: var(--header-height); padding: 1.25rem; border-block-end: 1px solid var(--line); background: #0d0f10; box-shadow: var(--shadow); }
.mobile-menu nav { display: grid; }
.mobile-menu .nav-link { padding: .9rem .4rem; border-block-end: 1px solid var(--line); font-size: 1rem; }
.mobile-utility { display: flex; flex-wrap: wrap; gap: 1rem; padding-block-start: 1.2rem; color: var(--orange-bright); }

/* Hero */
.home-hero { position: relative; min-height: calc(100svh - var(--header-height)); display: grid; align-content: end; overflow: hidden; border-block-end: 1px solid var(--line); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; filter: saturate(.45) contrast(1.05); }
.hero-shade { background: linear-gradient(90deg, rgb(9 10 11 / .95) 0%, rgb(9 10 11 / .72) 48%, rgb(9 10 11 / .25) 100%), linear-gradient(0deg, var(--ink), transparent 38%); }
[dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgb(9 10 11 / .95) 0%, rgb(9 10 11 / .72) 48%, rgb(9 10 11 / .25) 100%), linear-gradient(0deg, var(--ink), transparent 38%); }
.hero-content { position: relative; padding-block: clamp(5rem, 11vw, 10rem) 4rem; }
.hero-content h1 { max-width: 15ch; margin-block-end: var(--space-4); font-size: var(--step-4); }
.hero-content > p:not(.eyebrow) { max-width: 57ch; color: #d8d9da; font-size: var(--step-1); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: var(--space-4); }
.hero-stats { position: relative; padding-block-end: 2.2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: rgb(14 16 17 / .72); backdrop-filter: blur(12px); }
.stat { min-height: 125px; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; border-inline-start: 1px solid var(--line); }
.stat:first-child { border-inline-start: 0; }
.stat strong { color: var(--orange-bright); font: 800 var(--step-2)/1 var(--font-mono); }
.stat span { margin-block-start: .65rem; color: var(--muted); font-size: var(--step--1); }
.page-hero { min-height: clamp(390px, 57vh, 630px); display: flex; align-items: flex-end; padding-block: clamp(5rem, 10vw, 8rem); background: radial-gradient(circle at 85% 10%, rgb(236 124 60 / .18), transparent 30%), linear-gradient(135deg, var(--surface-2), var(--ink)); border-block-end: 1px solid var(--line); }
[dir="rtl"] .page-hero { background: radial-gradient(circle at 15% 10%, rgb(236 124 60 / .18), transparent 30%), linear-gradient(225deg, var(--surface-2), var(--ink)); }
.page-hero.compact { min-height: 340px; }
.page-hero h1 { max-width: 17ch; margin-block-end: var(--space-3); }
.page-hero p:not(.eyebrow) { max-width: 65ch; color: var(--muted); font-size: var(--step-1); }
.page-hero .button { margin-block-start: var(--space-3); }

/* Cards and grids */
.card-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { min-height: 330px; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--surface); transition: background .3s var(--ease), transform .3s var(--ease); }
.service-card:hover { position: relative; z-index: 2; background: var(--surface-2); transform: translateY(-4px); }
.card-index, .number-card > span { color: var(--orange); font: 650 var(--step--1)/1 var(--font-mono); }
.service-card h3 { margin-block: auto var(--space-3); }
.service-card p { color: #b4b7b9; font-size: .98rem; line-height: 1.68; }
.service-card .text-link { margin-block-start: var(--space-3); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.project-card { min-width: 0; }
.project-card a { display: block; }
.project-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.project-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform .7s var(--ease), filter .5s var(--ease); }
.project-card:hover img { transform: scale(1.035); filter: saturate(1); }
.project-copy { padding: 1.2rem 0 2rem; border-block-end: 1px solid currentColor; }
.project-copy span { color: var(--orange); font: 650 var(--step--1)/1 var(--font-mono); }
.project-copy h3 { margin-block: .8rem .65rem; }
.project-copy p { margin: 0; color: var(--muted); }
.section-contrast .project-copy p { color: var(--muted-light); }
.four-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.number-card { min-height: 270px; display: flex; flex-direction: column; padding: 1.7rem; background: var(--ink); }
.number-card h3 { margin-block: auto .8rem; }
.number-card p { margin-block-end: 0; color: #b4b7b9; font-size: .96rem; line-height: 1.65; }
.process-grid { list-style: none; border-block-start: 1px solid var(--line); }
.process-grid li { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; align-items: start; padding-block: 1.65rem; border-block-end: 1px solid var(--line); }
.process-grid h3 { font-size: 1.22rem; }
.process-grid p { margin: .55rem 0 0; color: #b4b7b9; line-height: 1.65; }

.principle-icon, .process-icon { position: relative; flex: none; display: block; width: 54px; aspect-ratio: 1; border: 1px solid rgb(236 124 60 / .34); background: rgb(236 124 60 / .045); color: var(--orange-bright); box-shadow: inset 0 0 24px rgb(236 124 60 / .035), 0 0 24px rgb(236 124 60 / .045); }
.principle-icon::before, .principle-icon::after, .principle-icon i, .principle-icon b, .process-icon::before, .process-icon::after, .process-icon i, .process-icon b { content: ""; position: absolute; display: block; }
.icon-precision { border-radius: 50%; }
.icon-precision::before { inset: 12px; border: 1px solid currentColor; border-radius: 50%; }
.icon-precision::after { inset: 50% 7px auto; height: 1px; background: currentColor; }
.icon-precision i { inset: 7px auto 7px 50%; width: 1px; background: currentColor; }
.icon-precision b { width: 6px; aspect-ratio: 1; inset: 50% auto auto 50%; translate: -50% -50%; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.icon-innovation i { width: 21px; aspect-ratio: 1; inset: 50% auto auto 50%; translate: -50% -50%; rotate: 45deg; border: 1px solid currentColor; }
.icon-innovation b { width: 5px; aspect-ratio: 1; inset: 50% auto auto 50%; translate: -50% -50%; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.icon-innovation::before, .icon-innovation::after { width: 1px; height: 9px; inset: 4px auto auto 50%; background: currentColor; box-shadow: 0 37px currentColor; }
.icon-innovation::after { width: 9px; height: 1px; inset: 50% auto auto 4px; box-shadow: 37px 0 currentColor; }
.icon-commitment i { width: 13px; height: 24px; inset: 10px auto auto 21px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; }
.icon-commitment::before { inset: 8px; border: 1px solid rgb(255 255 255 / .12); border-radius: 50% 50% 45% 45%; }
.icon-collaboration::before { inset: 50% 10px auto; height: 1px; background: currentColor; }
.icon-collaboration::after { width: 7px; aspect-ratio: 1; inset: 50% auto auto 50%; translate: -50% -50%; border-radius: 50%; background: currentColor; box-shadow: -17px 0 0 1px var(--ink), -17px 0 0 2px currentColor, 17px 0 0 1px var(--ink), 17px 0 0 2px currentColor; }
.process-icon { width: 52px; border-radius: 8px; }
.icon-analysis::before { inset: 10px; border: 1px solid currentColor; border-radius: 50%; }
.icon-analysis::after { width: 12px; height: 1px; inset: auto 5px 8px auto; rotate: 45deg; background: currentColor; transform-origin: right; }
.icon-analysis i { width: 5px; aspect-ratio: 1; inset: 18px auto auto 25px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.icon-design::before, .icon-design::after { width: 32px; height: 1px; inset: 25px auto auto 9px; background: currentColor; rotate: 45deg; }
.icon-design::after { rotate: -45deg; }
.icon-design i { inset: 12px; border: 1px solid rgb(255 255 255 / .17); rotate: 45deg; }
.icon-plans::before, .icon-plans::after, .icon-plans i { inset: 11px 15px 17px 11px; border: 1px solid currentColor; background: var(--ink); }
.icon-plans::after { translate: 4px 4px; opacity: .72; }
.icon-plans i { translate: 8px 8px; opacity: .42; }
.icon-site::before { inset: 11px 10px 9px; border-block-end: 1px solid currentColor; background: linear-gradient(90deg, transparent 12%, currentColor 13% 17%, transparent 18% 46%, currentColor 47% 51%, transparent 52% 80%, currentColor 81% 85%, transparent 86%); opacity: .85; }
.icon-site::after { inset: 18px 8px auto; height: 1px; background: currentColor; box-shadow: 0 9px currentColor, 0 18px currentColor; opacity: .62; }
.section-contrast .process-grid, .section-contrast .process-grid li { border-color: #b9b5ae; }
.section-contrast .process-grid p { color: #505356; }
.section-contrast .process-icon { color: #9b4215; border-color: rgb(155 66 21 / .42); background: rgb(155 66 21 / .055); }
.section-contrast .icon-plans::before, .section-contrast .icon-plans::after, .section-contrast .icon-plans i { background: var(--paper); }
.split-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.two-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.two-panels > article { padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--surface); }
.feature-list { list-style: none; border-block-start: 1px solid var(--line); }
.feature-list li { position: relative; padding: 1rem 1.8rem 1rem 0; border-block-end: 1px solid var(--line); }
[dir="rtl"] .feature-list li { padding: 1rem 0 1rem 1.8rem; }
.feature-list li::after { content: "+"; position: absolute; inset-inline-end: .2rem; color: var(--orange); }
.reference-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid #aaa; }
.reference-list li { padding: 1.3rem 0; border-block-end: 1px solid #aaa; font-size: var(--step-1); }
.reference-list li:nth-child(odd) { padding-inline-end: 2rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.team-card { background: var(--surface-2); }
.team-card > img, .team-placeholder { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1); }
.team-placeholder { display: grid; place-items: center; color: #303438; background: #1a1d20; font-size: 4rem; font-weight: 900; }
.team-card > div:last-child { padding: 1.2rem; }
.team-card h3 { margin: 0; font-size: 1.08rem; }
.team-card p { margin: .4rem 0 0; color: var(--orange-bright); font-size: .86rem; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.testimonial-grid figure { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); }
.testimonial-grid blockquote { margin: 0; font-size: 1.08rem; line-height: 1.65; }
.testimonial-grid figcaption { margin-block-start: 1.5rem; color: var(--orange-bright); font-size: .84rem; }

/* Detail pages */
.breadcrumbs { padding-block: .85rem; font-size: .8rem; color: #b0b2b4; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: .5rem; color: #555; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.detail-grid > div { min-height: 360px; padding: clamp(1.5rem, 4vw, 3.4rem); background: var(--surface); }
.detail-grid .section-heading { margin-block-end: var(--space-4); }
.faq-wrap { max-width: 900px; }
details { border-block-start: 1px solid #a9a49c; }
details:last-child { border-block-end: 1px solid #a9a49c; }
summary { cursor: pointer; padding: 1.4rem 2rem 1.4rem 0; font-weight: 750; }
[dir="rtl"] summary { padding: 1.4rem 0 1.4rem 2rem; }
details p { padding-block-end: 1.4rem; }
.project-hero { padding-block-start: clamp(4rem, 8vw, 7rem); }
.project-hero .container { padding-block-end: var(--space-4); }
.project-hero h1 { max-width: 16ch; }
.project-hero > img { width: 100%; max-height: 74vh; object-fit: cover; }
.project-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 8rem); }
.facts { border-block-start: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(100px,.5fr) 1fr; gap: 1rem; padding-block: 1rem; border-block-end: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 650; }
.content-note { align-self: end; padding: 1.5rem; border-inline-start: 2px solid var(--orange); background: var(--surface); color: var(--muted); }
.content-note p { margin: 0; }
.project-pagination { display: grid; grid-template-columns: 1fr 1fr; padding-block: var(--space-5); }
.project-pagination a { padding: 1.4rem; border: 1px solid var(--line); }
.project-pagination a:last-child { text-align: end; }
.project-pagination small { display: block; color: var(--orange); }
.project-pagination strong { display: block; margin-block-start: .5rem; }
.category-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.category-grid li { min-height: 140px; display: flex; align-items: flex-end; padding: 1.25rem; background: var(--surface); font-weight: 750; }
.empty-state { margin-block-start: 2rem; padding: 2rem; border: 1px dashed #555; color: var(--muted); text-align: center; }
.prose { max-width: 780px; }
.prose h2 { margin-block-start: var(--space-5); }
.not-found { min-height: calc(100svh - var(--header-height)); display: grid; place-items: center; text-align: center; }
.error-code { margin: 0; color: var(--orange); font: 900 clamp(7rem,25vw,20rem)/.8 var(--font-mono); opacity: .2; }
.not-found h1 { margin-block-start: -1rem; }
.not-found .hero-actions { justify-content: center; }

/* CTA and forms */
.cta-section { padding-block: var(--space-6); background: var(--orange); color: var(--ink); }
.cta-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.cta-inner .eyebrow { color: #5f2608; }
.cta-inner h2 { margin-block-end: .8rem; }
.cta-inner p { margin: 0; }
.cta-inner .button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact-layout { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr); gap: clamp(2.5rem, 8vw, 8rem); }
.contact-layout address { border-block-start: 1px solid var(--line); }
.contact-layout address p { padding-block: .9rem; margin: 0; border-block-end: 1px solid var(--line); }
.study-form { display: grid; gap: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.study-form label, .study-form legend { display: grid; gap: .55rem; color: #dedfe0; font-size: .92rem; font-weight: 650; }
.study-form fieldset { margin: 0; padding: 0; border: 0; }
.study-form input:not([type="checkbox"]), .study-form textarea { width: 100%; min-height: 50px; padding: .8rem .9rem; border: 1px solid #3b4044; border-radius: var(--radius-sm); background: #0d0f10; color: var(--paper); transition: border-color .2s, box-shadow .2s; }
.study-form textarea { resize: vertical; }
.study-form input:focus, .study-form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(236 124 60 / .16); outline: 0; }
.study-form small { color: var(--muted); font-weight: 400; }
.check-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-start: .8rem; }
.check-pill { display: block !important; cursor: pointer; }
.check-pill input { position: absolute; opacity: 0; }
.check-pill span { display: block; padding: .55rem .85rem; border: 1px solid #3b4044; border-radius: 999px; color: #b4b7b9; font-size: .84rem; }
.check-pill input:checked + span { border-color: var(--orange); background: rgb(236 124 60 / .14); color: var(--paper); }
.check-pill input:focus-visible + span { outline: 3px solid var(--orange-bright); outline-offset: 3px; }
.consent { grid-template-columns: auto 1fr !important; align-items: start; }
.consent input { margin-block-start: .35rem; accent-color: var(--orange); }
.form-status { min-height: 1.5rem; margin: 0; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.study-form .button[disabled] { opacity: .55; cursor: wait; }
.honeypot { position: absolute; inset-inline-start: -9999px; }
.map-wrap { height: 430px; border-block-start: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.8); }

/* Footer */
.site-footer { padding-block-start: var(--space-6); background: #08090a; border-block-start: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: clamp(2rem, 5vw, 5rem); }
.brand-footer { margin-block-end: 1.5rem; }
.footer-grid p { color: var(--muted); }
.footer-grid h2 { color: #929597; font: 650 .78rem/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-block: .55rem; }
.footer-grid a:hover { color: var(--orange-bright); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: var(--space-5); padding-block: 1.5rem; border-block-start: 1px solid var(--line); color: #8f9294; font-size: .8rem; }

/* Filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: var(--space-4); }
.filter-bar button { min-height: 42px; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.filter-bar button:hover, .filter-bar button.active { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.project-card[hidden] { display: none; }

@media (max-width: 1180px) {
  .desktop-nav, .portal-link, .header-actions > .button, .header-actions > .language-switcher { display: none; }
  .header-actions { margin-inline-start: auto; }
  .menu-button { display: grid; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-grid, .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  :root { --header-height: 66px; }
  .container { width: min(calc(100% - 1.5rem), var(--container)); }
  .brand small { display: none; }
  .home-hero { min-height: auto; }
  .hero-content { padding-block: 6rem 2.5rem; }
  .hero-content h1 { font-size: clamp(2.45rem, 10.5vw, 3.9rem); }
  .hero-image { filter: saturate(.4) contrast(1.08); }
  .hero-shade { background: linear-gradient(0deg, var(--ink) 3%, rgb(9 10 11 / .75) 60%, rgb(9 10 11 / .4)); }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { min-height: 95px; border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .stat:first-child { border-block-start: 0; }
  .services-grid, .project-grid, .detail-grid, .split-section, .two-panels, .project-detail, .contact-layout { grid-template-columns: 1fr; }
  .service-card { min-height: 280px; }
  .four-grid, .team-grid, .testimonial-grid, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-grid figure:last-child { grid-column: 1 / -1; }
  .reference-list { grid-template-columns: 1fr; }
  .reference-list li:nth-child(odd) { padding-inline-end: 0; }
  .cta-inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .project-pagination { grid-template-columns: 1fr; gap: 1px; }
}

@media (max-width: 480px) {
  .section { padding-block: 4.3rem; }
  .header-inner { width: calc(100% - 1.25rem); }
  .four-grid, .team-grid, .testimonial-grid, .category-grid, .footer-grid { grid-template-columns: 1fr; }
  .testimonial-grid figure:last-child { grid-column: auto; }
  .number-card { min-height: 225px; }
  .hero-actions .button { width: 100%; }
  .project-copy h3 { font-size: 1.15rem; }
  .check-grid { gap: .4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .cta-section, .button, .filter-bar { display: none !important; }
  body { background: white; color: black; }
  .section, .page-hero { padding: 2rem 0; background: white; color: black; }
}

/* ========================================================================== */
/* NETAL V4 — depth, motion and technical atmosphere                          */
/* ========================================================================== */
body.v3 { overflow-x: clip; background: #090a0b; }
body.v3 > header, body.v3 > main, body.v3 > footer, body.v3 > .breadcrumbs { position: relative; z-index: 2; }
.ambient-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .5; }
.ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .018) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .018) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.ambient-orb { position: absolute; width: 42vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .08; }
.ambient-orb-a { inset-block-start: 10%; inset-inline-end: -18%; background: var(--orange); animation: ambient-drift 18s ease-in-out infinite alternate; }
.ambient-orb-b { inset-block-start: 58%; inset-inline-start: -22%; background: #8f9da6; animation: ambient-drift 24s 2s ease-in-out infinite alternate-reverse; }
@keyframes ambient-drift { to { transform: translate3d(7vw, -4vh, 0) scale(1.12); } }
.pointer-light { position: fixed; inset: 0 auto auto 0; z-index: 90; width: 520px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgb(236 124 60 / .085), transparent 66%); transform: translate3d(calc(var(--pointer-x, -900px) - 50%), calc(var(--pointer-y, -900px) - 50%), 0); transition: opacity .35s; mix-blend-mode: screen; }
html.has-pointer .pointer-light { opacity: 1; }

.site-header { overflow: visible; }
.scroll-progress { position: absolute; inset-inline-start: 0; inset-block-end: -1px; width: var(--scroll-progress, 0%); height: 2px; background: linear-gradient(90deg, var(--orange), var(--orange-bright)); box-shadow: 0 0 16px rgb(236 124 60 / .65); transform-origin: left; }
[dir="rtl"] .scroll-progress { transform-origin: right; }
.brand span { text-shadow: 0 0 24px rgb(255 255 255 / .08); }
.brand i { filter: drop-shadow(0 0 8px rgb(236 124 60 / .65)); }
.nav-link::before { content: ""; position: absolute; inset: .2rem -.45rem; z-index: -1; border-radius: 3px; background: rgb(236 124 60 / .08); opacity: 0; transform: scale(.85); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nav-link:hover::before, .nav-link[aria-current="page"]::before { opacity: 1; transform: scale(1); }

.button { position: relative; isolation: isolate; overflow: hidden; transform: translate3d(var(--magnetic-x, 0), var(--magnetic-y, 0), 0); will-change: transform; }
.button::before { content: ""; position: absolute; z-index: -1; inset: -180% -50%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .38) 49%, transparent 56%); transform: translateX(-42%) rotate(8deg); transition: transform .75s var(--ease); }
.button:hover::before { transform: translateX(42%) rotate(8deg); }
.button:hover { transform: translate3d(var(--magnetic-x, 0), calc(var(--magnetic-y, 0) - 2px), 0); }

[data-glow] { --glow-x: 50%; --glow-y: 50%; position: relative; isolation: isolate; }
[data-glow]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--glow-x) var(--glow-y), rgb(236 124 60 / .12), transparent 46%); opacity: 0; transition: opacity .35s var(--ease); }
[data-glow]:hover::before { opacity: 1; }
[data-tilt] { --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0, var(--lift), 0); transform-style: preserve-3d; transition: transform .45s var(--ease), border-color .35s, box-shadow .35s; will-change: transform; }

.section { position: relative; background-image: linear-gradient(135deg, rgb(255 255 255 / .012), transparent 36%); }
.section::after { content: ""; position: absolute; inset-inline-start: max(1.125rem, calc((100% - var(--container)) / 2)); inset-block-start: -1px; width: 54px; height: 1px; background: var(--orange); box-shadow: 0 0 12px rgb(236 124 60 / .5); }
.section-heading h2 { position: relative; }
.section-heading h2::after { content: ""; display: block; width: 0; height: 2px; margin-block-start: .8rem; background: linear-gradient(90deg, var(--orange), transparent); transition: width 1s .15s var(--ease); }
.section-heading.is-visible h2::after { width: min(120px, 30%); }
[dir="rtl"] .section-heading h2::after { background: linear-gradient(270deg, var(--orange), transparent); }

/* V3 hero scene */
.home-hero { perspective: 1400px; isolation: isolate; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(120deg, transparent 55%, rgb(236 124 60 / .06)); }
.hero-image { scale: 1.045; transform: translate3d(calc(var(--hero-x, 0) * -10px), calc(var(--hero-y, 0) * -7px), 0); transition: transform .3s linear; }
.hero-blueprint { position: absolute; inset: 7% 3% 14%; z-index: 1; pointer-events: none; border: 1px solid rgb(255 255 255 / .09); opacity: .55; }
.hero-blueprint::before, .hero-blueprint::after { content: ""; position: absolute; background: rgb(236 124 60 / .32); }
.hero-blueprint::before { inset-inline-start: 28%; inset-block: -4% -4%; width: 1px; }
.hero-blueprint::after { inset-block-start: 38%; inset-inline: -2% -2%; height: 1px; }
.hero-blueprint i, .hero-blueprint b, .hero-blueprint span { position: absolute; width: 9px; aspect-ratio: 1; border: 1px solid var(--orange); border-radius: 50%; box-shadow: 0 0 12px rgb(236 124 60 / .5); }
.hero-blueprint i { inset: 37.4% auto auto 27.65%; }
.hero-blueprint b { inset: auto 8% 17% auto; }
.hero-blueprint span { inset: 12% auto auto 72%; }
.hero-layout { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding-block: clamp(5rem, 10vw, 9rem) 3.5rem; }
.hero-content { padding: 0; transform: translate3d(calc(var(--hero-x, 0) * 4px), calc(var(--hero-y, 0) * 3px), 34px); }
.hero-content h1 { text-shadow: 0 18px 55px rgb(0 0 0 / .52); }
.hero-tech-panel { align-self: center; min-height: 460px; padding: 1.25rem; border: 1px solid rgb(255 255 255 / .18); background: linear-gradient(145deg, rgb(23 26 29 / .78), rgb(11 12 13 / .55)); box-shadow: 0 35px 90px rgb(0 0 0 / .45), inset 0 1px rgb(255 255 255 / .08); backdrop-filter: blur(16px); transform-origin: center; }
.hero-tech-panel:hover { --lift: -7px; border-color: rgb(236 124 60 / .5); box-shadow: 0 45px 110px rgb(0 0 0 / .55), 0 0 45px rgb(236 124 60 / .08), inset 0 1px rgb(255 255 255 / .1); }
.tech-panel-top { display: flex; justify-content: space-between; gap: 1rem; color: #b0b3b5; font: 650 .66rem/1 var(--font-mono); letter-spacing: .1em; }
.tech-panel-top i { color: var(--orange); font-style: normal; }
.tech-orbit { position: relative; width: min(230px, 82%); aspect-ratio: 1; margin: 2.5rem auto; border: 1px solid rgb(236 124 60 / .36); border-radius: 50%; transform: rotateX(66deg) rotateZ(-12deg); transform-style: preserve-3d; animation: orbit-breathe 6s ease-in-out infinite; }
.tech-orbit::before, .tech-orbit::after, .tech-orbit i, .tech-orbit b { content: ""; position: absolute; inset: 16%; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; }
.tech-orbit::after { inset: 34%; border-color: var(--orange); box-shadow: 0 0 28px rgb(236 124 60 / .25); }
.tech-orbit i { inset: 0 49%; border-radius: 0; }
.tech-orbit b { inset: 49% 0; border-radius: 0; }
.tech-orbit span, .tech-orbit em { position: absolute; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px var(--orange); }
.tech-orbit span { inset: 8% auto auto 24%; }
.tech-orbit em { inset: auto 18% 12% auto; animation: node-pulse 2.5s ease-in-out infinite; }
@keyframes orbit-breathe { 50% { transform: rotateX(60deg) rotateZ(3deg) scale(1.04); } }
@keyframes node-pulse { 50% { opacity: .4; scale: .72; } }
.hero-tech-panel dl { margin: 0; border-block-start: 1px solid var(--line); }
.hero-tech-panel dl > div { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding-block: .8rem; border-block-end: 1px solid var(--line); }
.hero-tech-panel dt { color: var(--orange); font: 700 .72rem/1 var(--font-mono); }
.hero-tech-panel dd { margin: 0; color: #d0d2d3; font-size: .78rem; }
.seismic-panel { background: linear-gradient(145deg, rgb(19 24 27 / .9), rgb(8 10 11 / .7)); }
.seismic-panel [data-quake-status] { display: inline-flex; align-items: center; gap: .38rem; }
.seismic-panel [data-quake-status]::before { content: ""; width: 5px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.seismic-panel.has-live-quake [data-quake-status] { color: #ff9d5b; }
.seismic-panel.quake-offline [data-quake-status] { color: #9b9da0; }
.seismic-viewport { position: relative; height: 255px; margin-block: 1.25rem .65rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); background-color: rgb(7 9 10 / .65); background-image: linear-gradient(rgb(236 124 60 / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(236 124 60 / .055) 1px, transparent 1px); background-size: 22px 22px; box-shadow: inset 0 0 55px rgb(0 0 0 / .7); }
.seismic-viewport::before { content: "POINT CLOUD / STRUCTURAL MODEL"; position: absolute; z-index: 3; inset-block-start: .65rem; inset-inline-start: .7rem; color: rgb(255 255 255 / .36); font: 600 .5rem/1 var(--font-mono); letter-spacing: .1em; }
.seismic-cloud { position: absolute; inset: 0; width: 100%; height: 100%; }
.seismic-axis { position: absolute; z-index: 3; color: rgb(236 124 60 / .7); font: 650 .52rem/1 var(--font-mono); }
.axis-x { inset-inline-end: .65rem; inset-block-end: .55rem; }
.axis-z { inset-inline-start: .55rem; inset-block-start: 50%; }
.seismic-reticle { position: absolute; z-index: 2; inset-inline-start: 50%; inset-block-start: 54%; width: 46px; aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgb(236 124 60 / .16); border-radius: 50%; animation: reticle-pulse 2.4s ease-out infinite; }
[dir="rtl"] .seismic-reticle { translate: 50% -50%; }
.seismic-reticle i, .seismic-reticle b { position: absolute; background: rgb(236 124 60 / .24); }
.seismic-reticle i { inset: 50% -12px auto; height: 1px; }
.seismic-reticle b { inset: -12px 50% auto; width: 1px; height: calc(100% + 24px); }
@keyframes reticle-pulse { 0% { scale: .65; opacity: .1; } 55% { opacity: .75; } 100% { scale: 1.55; opacity: 0; } }
.seismic-wave { position: relative; height: 32px; overflow: hidden; border-block: 1px solid rgb(255 255 255 / .08); background: linear-gradient(90deg, rgb(236 124 60 / .04), transparent); }
.seismic-wave::before, .seismic-wave::after { content: ""; position: absolute; }
.seismic-wave::before { inset: 5px -70% 5px 0; background: var(--orange); clip-path: polygon(0 48%,4% 48%,5% 20%,6% 76%,7% 43%,11% 48%,17% 48%,18% 37%,19% 62%,20% 46%,25% 48%,31% 48%,32% 10%,33% 88%,34% 30%,35% 65%,36% 48%,43% 48%,48% 48%,49% 28%,50% 72%,51% 40%,52% 56%,56% 48%,63% 48%,64% 18%,65% 82%,66% 36%,67% 60%,69% 48%,76% 48%,82% 48%,83% 32%,84% 68%,85% 44%,89% 48%,100% 48%,100% 53%,89% 53%,85% 49%,84% 73%,83% 37%,82% 53%,76% 53%,69% 53%,67% 65%,66% 41%,65% 87%,64% 23%,63% 53%,56% 53%,52% 61%,51% 45%,50% 77%,49% 33%,48% 53%,43% 53%,36% 53%,35% 70%,34% 35%,33% 93%,32% 15%,31% 53%,25% 53%,20% 51%,19% 67%,18% 42%,17% 53%,11% 53%,7% 48%,6% 81%,5% 25%,4% 53%,0 53%); opacity: .75; animation: seismic-trace 3.2s linear infinite; }
.seismic-wave::after { inset-block: 0; inset-inline-start: 22%; width: 1px; background: var(--orange-bright); box-shadow: 0 0 9px var(--orange); animation: seismic-scan 3.2s linear infinite; }
.seismic-wave > * { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); opacity: .55; }
.seismic-wave i { inset: 6px auto auto 13%; }.seismic-wave span { inset: auto auto 5px 38%; }.seismic-wave b { inset: 7px 27% auto auto; }.seismic-wave em { inset: auto 8% 6px auto; }
@keyframes seismic-trace { to { translate: 41.2% 0; } }
@keyframes seismic-scan { from { inset-inline-start: 0; } to { inset-inline-start: 100%; } }
@keyframes seismic-point-flash { 50% { opacity: .35; } }
.quake-readout > div { grid-template-columns: 78px minmax(0, 1fr) !important; }
.quake-readout dt { align-self: center; font-size: .62rem; letter-spacing: .055em; }
.quake-readout dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); letter-spacing: .015em; }
.quake-readout [data-quake-magnitude] { color: var(--paper); font-size: .92rem; font-weight: 750; }
.seismic-panel[aria-busy="true"] [data-quake-country] { opacity: .55; animation: quake-data-pulse 1.2s ease-in-out infinite; }
.seismic-sources { display: flex; justify-content: space-between; gap: .75rem; margin-block-start: .72rem; }
.seismic-source { color: rgb(255 255 255 / .5); font: 650 .58rem/1 var(--font-mono); letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; transition: color .25s; }
.seismic-source:hover { color: var(--orange-bright); }
@keyframes quake-data-pulse { 50% { opacity: 1; } }
.hero-stats { z-index: 4; }
.stats-grid { overflow: hidden; box-shadow: 0 24px 65px rgb(0 0 0 / .32); }
.stat { position: relative; transition: background .35s var(--ease); }
.stat::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 0; height: 2px; background: var(--orange); transition: width .55s var(--ease); }
.stat:hover { background: rgb(236 124 60 / .05); }
.stat:hover::after { width: 100%; }
.discipline-rail { position: relative; z-index: 3; overflow: hidden; padding-block: .95rem; border-block: 1px solid var(--line); background: #0d0f10; }
.discipline-rail > div { width: max-content; display: flex; align-items: center; animation: rail-move 30s linear infinite; }
.discipline-rail span { display: inline-flex; align-items: center; gap: 2rem; margin-inline-end: 2rem; color: #9b9da0; font: 650 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.discipline-rail i { width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
@keyframes rail-move { to { transform: translateX(-50%); } }
[dir="rtl"] .discipline-rail > div { animation-direction: reverse; }

/* V3 cards */
.service-card { overflow: hidden; border: 1px solid transparent; }
.service-card:hover { --lift: -7px; background: #191c1f; border-color: rgb(236 124 60 / .34); box-shadow: 0 30px 70px rgb(0 0 0 / .38), 0 0 35px rgb(236 124 60 / .06); }
.service-card > * { position: relative; z-index: 2; transform: translateZ(24px); }
.service-code { display: inline-flex; align-items: center; width: fit-content; min-width: 46px; min-height: 25px; padding: .3rem .48rem; border: 1px solid rgb(236 124 60 / .28); background: rgb(236 124 60 / .06); color: var(--orange-bright); letter-spacing: .08em; }
.service-sigil { position: absolute; z-index: 1; inset-block-start: 1.5rem; inset-inline-end: 1.5rem; width: 70px; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / .1); border-radius: 50%; opacity: .6; transform: translateZ(12px) rotate(0); transition: transform .65s var(--ease), border-color .35s; }
.service-sigil::before, .service-sigil::after, .service-sigil i, .service-sigil b { content: ""; position: absolute; }
.service-sigil::before { inset: 15%; border: 1px solid rgb(236 124 60 / .45); transform: rotate(45deg); }
.service-sigil::after { inset: 48% 8%; height: 1px; background: rgb(255 255 255 / .24); }
.service-sigil i { inset: 8% 49%; width: 1px; background: rgb(255 255 255 / .18); }
.service-sigil b { width: 7px; aspect-ratio: 1; inset: 13% auto auto 14%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.service-card:hover .service-sigil { transform: translateZ(35px) rotate(18deg); border-color: rgb(236 124 60 / .42); }
.project-card { transform-origin: center; }
.project-card:hover { --lift: -8px; z-index: 3; }
.project-card > a { transform-style: preserve-3d; }
.project-image { position: relative; box-shadow: 0 22px 45px rgb(0 0 0 / .25); transform: translateZ(12px); }
.project-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 52%, rgb(236 124 60 / .17)); opacity: 0; transition: opacity .35s; }
.project-card:hover .project-image::after { opacity: 1; }
.project-index { position: absolute; z-index: 3; inset-block-start: 1rem; inset-inline-start: 1rem; display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / .3); background: rgb(10 11 12 / .5); backdrop-filter: blur(8px); color: var(--paper); font: 650 .68rem/1 var(--font-mono); }
.project-scan, .team-scan { position: absolute; z-index: 2; inset: -100% 0 auto; height: 36%; background: linear-gradient(180deg, transparent, rgb(236 124 60 / .15), transparent); opacity: 0; transition: inset-block-start .9s var(--ease), opacity .25s; pointer-events: none; }
.project-card:hover .project-scan, .team-card:hover .team-scan { inset-block-start: 100%; opacity: 1; }
.project-copy { transform: translateZ(28px); }
.number-card { position: relative; overflow: hidden; transition: transform .35s var(--ease), background .35s; }
.number-card::after { content: ""; position: absolute; width: 120px; aspect-ratio: 1; inset: auto -55px -55px auto; border: 1px solid rgb(236 124 60 / .2); transform: rotate(45deg); transition: transform .6s var(--ease); }
.number-card:hover { background: var(--surface-2); transform: translateY(-5px); }
.number-card:hover::after { transform: rotate(65deg) scale(1.15); }
.team-card { position: relative; overflow: hidden; border: 1px solid transparent; }
.team-card:hover { --lift: -7px; border-color: rgb(236 124 60 / .32); box-shadow: 0 28px 60px rgb(0 0 0 / .4); }
.team-card > img, .team-placeholder { transition: filter .5s, scale .65s var(--ease); }
.team-card:hover > img { filter: grayscale(.2); scale: 1.025; }
.team-card > div:last-child { position: relative; z-index: 3; transform: translateZ(25px); background: linear-gradient(180deg, rgb(23 26 29 / .75), var(--surface-2)); backdrop-filter: blur(10px); }
.testimonial-grid figure { position: relative; overflow: hidden; transition: transform .35s var(--ease), background .35s; }
.testimonial-grid figure::before { content: "“"; position: absolute; inset-block-start: -2.2rem; inset-inline-end: 1rem; color: rgb(236 124 60 / .08); font-size: 11rem; line-height: 1; }
.testimonial-grid figure:hover { background: var(--surface-2); transform: translateY(-5px); }

/* Technical page heroes and detail panels */
.page-hero { position: relative; overflow: hidden; isolation: isolate; perspective: 1200px; }
.page-hero::before { content: ""; position: absolute; inset: 8% 3% -18%; z-index: -1; border: 1px solid rgb(255 255 255 / .055); background-image: linear-gradient(rgb(255 255 255 / .03) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(850px) rotateX(62deg) translateY(18%); transform-origin: bottom; mask-image: linear-gradient(to bottom, transparent, #000 38%); }
.page-hero::after { content: ""; position: absolute; z-index: -1; width: 34vw; aspect-ratio: 1; inset-block-start: 7%; inset-inline-end: 4%; border: 1px solid rgb(236 124 60 / .16); border-radius: 50%; box-shadow: inset 0 0 60px rgb(236 124 60 / .04), 0 0 80px rgb(236 124 60 / .035); animation: page-orbit 14s linear infinite; }
@keyframes page-orbit { to { rotate: 360deg; } }
.page-hero-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49.9%, rgb(236 124 60 / .11) 50%, transparent 50.1%); }
.page-hero-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.service-object { width: min(360px, 80vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; transform-style: preserve-3d; }
.object-core { position: relative; width: 58%; aspect-ratio: 1; transform: rotateX(58deg) rotateZ(45deg); transform-style: preserve-3d; animation: object-float 7s ease-in-out infinite; }
.object-core::before, .object-core::after, .object-core i, .object-core b, .object-core span, .object-core em { content: ""; position: absolute; inset: 0; border: 1px solid rgb(236 124 60 / .45); box-shadow: inset 0 0 35px rgb(236 124 60 / .035); }
.object-core::after { transform: translateZ(70px); border-color: rgb(255 255 255 / .23); }
.object-core i { transform: rotateY(90deg) translateZ(0); transform-origin: left; }
.object-core b { transform: rotateX(90deg) translateZ(0); transform-origin: top; }
.object-core span { inset: 19%; transform: translateZ(36px); border-color: var(--orange); box-shadow: 0 0 30px rgb(236 124 60 / .15); }
.object-core em { inset: 42%; transform: translateZ(82px); background: var(--orange); box-shadow: 0 0 24px var(--orange); }
@keyframes object-float { 50% { transform: rotateX(62deg) rotateZ(53deg) translateZ(24px); } }
.service-object small { position: absolute; inset-block-end: 4%; color: var(--muted); font: 650 .62rem/1 var(--font-mono); letter-spacing: .12em; }
.detail-grid > div { overflow: hidden; transition: transform .35s var(--ease), background .35s, box-shadow .35s; }
.detail-grid > div:nth-child(2), .detail-grid > div:nth-child(3) { background: #141719; }
.detail-grid > div:hover { z-index: 2; background: #1a1d20; transform: translateY(-5px); box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.process-grid li { position: relative; opacity: .56; transform: translateX(0); transition: opacity .4s, transform .45s var(--ease), background .4s; }
.process-grid li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 16%; width: 2px; background: var(--orange); scale: 1 0; transition: scale .4s var(--ease); }
.process-grid li.is-active { opacity: 1; transform: translateX(8px); background: linear-gradient(90deg, rgb(236 124 60 / .075), transparent); }
[dir="rtl"] .process-grid li.is-active { transform: translateX(-8px); background: linear-gradient(270deg, rgb(236 124 60 / .075), transparent); }
.process-grid li.is-active::before { scale: 1 1; }
details { transition: background .3s; }
details[open] { background: rgb(236 124 60 / .04); }
summary { position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; inset-inline-end: .3rem; color: var(--orange); font: 400 1.5rem/1 var(--font-mono); transition: rotate .3s var(--ease); }
details[open] summary::after { rotate: 45deg; }

/* V3 project depth */
.project-hero { position: relative; overflow: hidden; }
.project-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 48%); }
.project-hero-media { position: relative; overflow: hidden; margin-inline: clamp(.75rem, 3vw, 3rem); border: 1px solid rgb(255 255 255 / .13); box-shadow: 0 45px 110px rgb(0 0 0 / .45); }
.project-hero-media img { width: 100%; max-height: 74vh; object-fit: cover; scale: 1.055; transform: translate3d(0, var(--project-depth, 0px), 0); will-change: transform; }
.project-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, transparent 65%, rgb(236 124 60 / .15)); }
.project-hero-mark { position: absolute; z-index: 2; inset-inline-end: 1.2rem; inset-block-end: 1.2rem; padding: .58rem .78rem; border: 1px solid rgb(255 255 255 / .25); background: rgb(9 10 11 / .55); backdrop-filter: blur(10px); color: #e3e3e3; font: 650 .74rem/1 var(--font-mono); letter-spacing: .1em; }
.technical-sheet { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); background: linear-gradient(145deg, #131618, #0d0f10); box-shadow: 0 25px 60px rgb(0 0 0 / .25); }
.project-pagination a { position: relative; overflow: hidden; transition: background .35s, transform .35s var(--ease), border-color .35s; }
.project-pagination a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(236 124 60 / .08)); opacity: 0; transition: opacity .35s; }
.project-pagination a:hover { z-index: 2; background: var(--surface-2); border-color: rgb(236 124 60 / .35); transform: translateY(-4px); }
.project-pagination a:hover::after { opacity: 1; }

/* V3 form, CTA and supporting components */
.cta-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(110deg, #e26f30, var(--orange-bright)); }
.cta-blueprint { position: absolute; inset: -60% 46% -100% -12%; z-index: -1; border: 1px solid rgb(0 0 0 / .18); transform: rotate(18deg); background-image: linear-gradient(rgb(0 0 0 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / .09) 1px, transparent 1px); background-size: 42px 42px; }
[dir="rtl"] .cta-blueprint { inset: -60% -12% -100% 46%; transform: rotate(-18deg); }
.study-form { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgb(23 26 29 / .92), rgb(10 11 12 / .94)); box-shadow: 0 30px 75px rgb(0 0 0 / .25); }
.form-progress { position: absolute; inset: -1px -1px auto; height: 2px; overflow: hidden; background: #24282b; }
.form-progress span { display: block; width: var(--form-progress, 0%); height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-bright)); box-shadow: 0 0 14px var(--orange); transition: width .45s var(--ease); }
.study-form label:focus-within { color: var(--orange-bright); }
.study-form input:not([type="checkbox"]), .study-form textarea { transition: border-color .25s, box-shadow .25s, background .25s, transform .25s; }
.study-form input:focus, .study-form textarea:focus { background: #111416; transform: translateY(-1px); box-shadow: 0 0 0 3px rgb(236 124 60 / .13), 0 12px 30px rgb(0 0 0 / .18); }
.check-pill span { transition: color .25s, border-color .25s, background .25s, transform .25s; }
.check-pill:hover span { transform: translateY(-2px); border-color: #62676b; }
.category-grid li { position: relative; overflow: hidden; transition: transform .35s var(--ease), background .35s; }
.category-grid li::before { content: ""; position: absolute; width: 70px; aspect-ratio: 1; inset: 1rem 1rem auto auto; border: 1px solid rgb(236 124 60 / .14); transform: rotate(45deg); }
[dir="rtl"] .category-grid li::before { inset: 1rem auto auto 1rem; }
.category-grid li:hover { z-index: 2; background: var(--surface-2); transform: translateY(-5px); }
.reference-list li { position: relative; transition: padding .3s var(--ease), color .3s; }
.reference-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -1px; width: 0; height: 2px; background: var(--orange); transition: width .5s var(--ease); }
.reference-list li:hover { padding-inline-start: 1rem; color: #111; }
.reference-list li:hover::before { width: 100%; }
.error-code { text-shadow: 14px 18px 0 rgb(236 124 60 / .06), -14px -18px 0 rgb(255 255 255 / .025); animation: error-depth 5s ease-in-out infinite; }
@keyframes error-depth { 50% { text-shadow: 20px 24px 0 rgb(236 124 60 / .08), -20px -24px 0 rgb(255 255 255 / .035); } }

/* ========================================================================== */
/* NETAL V4 — interactive particles and restrained fluorescent light          */
/* ========================================================================== */
.particle-field { position: absolute; inset: 0; z-index: 2; display: none; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
body.v4.page-home .ambient-scene { opacity: .72; }
body.v4.page-home .particle-field { display: block; opacity: .84; }
body.v4 .ambient-scene::before { content: ""; position: absolute; inset: -18%; background: radial-gradient(circle at 82% 18%, rgb(236 124 60 / .13), transparent 28%), radial-gradient(circle at 12% 72%, rgb(255 149 91 / .075), transparent 25%), radial-gradient(circle at 52% 96%, rgb(243 240 234 / .04), transparent 23%); filter: blur(28px); }
body.v4 .ambient-grid { background-size: 72px 72px; opacity: .72; }
body.v4 .home-hero::before { content: ""; position: absolute; inset: -24%; z-index: 2; pointer-events: none; background: radial-gradient(circle at 78% 34%, rgb(255 149 91 / .13), transparent 22%), radial-gradient(ellipse at 24% 78%, rgb(236 124 60 / .08), transparent 34%); mix-blend-mode: screen; animation: v4-hero-aurora 12s ease-in-out infinite alternate; }
@keyframes v4-hero-aurora { to { transform: translate3d(-2.5%, 2%, 0) scale(1.035); opacity: .74; } }
body.v4 .hero-content h1 { text-shadow: 0 18px 55px rgb(0 0 0 / .56), 0 0 46px rgb(236 124 60 / .055); }
body.v4 .hero-tech-panel { border-color: rgb(255 255 255 / .2); background: linear-gradient(145deg, rgb(20 24 27 / .9), rgb(7 9 10 / .74)); box-shadow: 0 38px 100px rgb(0 0 0 / .55), 0 0 58px rgb(236 124 60 / .075), inset 0 1px rgb(255 255 255 / .11); }
body.v4 .seismic-viewport { box-shadow: inset 0 0 62px rgb(0 0 0 / .72), 0 0 30px rgb(236 124 60 / .045); }
body.v4 .section:not(.section-contrast) { overflow: clip; background-image: radial-gradient(circle at 88% 14%, rgb(236 124 60 / .035), transparent 23%), radial-gradient(circle at 8% 90%, rgb(255 255 255 / .018), transparent 20%), linear-gradient(135deg, rgb(255 255 255 / .012), transparent 36%); }
body.v4 .section:not(.section-contrast)::before { content: ""; position: absolute; z-index: 0; width: min(520px, 54vw); aspect-ratio: 1; inset-block-start: 12%; inset-inline-end: -22%; border-radius: 50%; background: radial-gradient(circle, rgb(236 124 60 / .045), transparent 66%); filter: blur(22px); pointer-events: none; }
body.v4 .section > .container { position: relative; z-index: 1; }
body.v4 .section-muted { background-color: #101214; }
body.v4 .section-contrast { box-shadow: inset 0 1px rgb(236 124 60 / .2), inset 0 -1px rgb(236 124 60 / .14); }
body.v4 .button { box-shadow: 0 10px 34px rgb(236 124 60 / .09); }
body.v4 .button:hover { box-shadow: 0 14px 42px rgb(236 124 60 / .22); }

@media (prefers-reduced-motion: no-preference) {
  body.v4 .reveal { opacity: 0; transform: translate3d(var(--reveal-x, 0), 34px, -22px) scale(.975); filter: blur(7px); transition: opacity .88s var(--ease), transform .88s var(--ease), filter .8s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
  body.v4 .reveal.is-visible { opacity: 1; transform: none; filter: none; }
  body.v4 .services-grid > .reveal:nth-child(even), body.v4 .project-grid > .reveal:nth-child(even) { --reveal-x: 12px; }
  body.v4 .services-grid > .reveal:nth-child(odd), body.v4 .project-grid > .reveal:nth-child(odd) { --reveal-x: -12px; }
}

@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 2rem; }
  .hero-tech-panel { min-height: 400px; }
  .tech-orbit { width: 180px; margin-block: 2rem; }
}

@media (max-width: 780px) {
  .ambient-scene { opacity: .3; }
  body.v4.page-home .ambient-scene { opacity: .52; }
  body.v4.page-home .particle-field { opacity: .68; }
  .pointer-light { display: none; }
  .home-hero::after, .hero-blueprint { opacity: .25; }
  .hero-layout { display: block; padding-block: 6rem 2.5rem; }
  .hero-content { transform: none; }
  .hero-tech-panel { display: block; width: min(100%, 460px); min-height: 0; margin: 2rem auto 0; padding: 1rem; transform: none !important; }
  .seismic-viewport { height: 210px; margin-block: 1rem .55rem; }
  .seismic-wave { height: 28px; }
  .hero-tech-panel dl > div { padding-block: .68rem; }
  .quake-readout > div { grid-template-columns: 76px minmax(0, 1fr) !important; }
  .seismic-sources { margin-block-start: .65rem; }
  .discipline-rail { padding-block: .75rem; }
  .discipline-rail span { font-size: .68rem; }
  .page-hero-layout { grid-template-columns: 1fr; }
  .service-object { display: none; }
  .page-hero::after { width: 70vw; opacity: .45; }
  .project-hero-media { margin-inline: .75rem; }
  .project-hero-media img { scale: 1.02; transform: none; }
  .study-form { padding: 1.1rem; }
  .process-grid li, .process-grid li.is-active, [dir="rtl"] .process-grid li.is-active { transform: none; opacity: 1; }
}

@media (max-width: 430px) {
  .hero-tech-panel { margin-inline: 0; padding: .85rem; }
  .tech-panel-top { font-size: .6rem; }
  .seismic-viewport { height: 190px; }
  .quake-readout > div { grid-template-columns: 70px minmax(0, 1fr) !important; gap: .7rem !important; }
  .quake-readout dt { font-size: .58rem; }
  .quake-readout dd { font-size: .72rem; }
  .seismic-sources { gap: .5rem; }
  .seismic-source { font-size: .54rem; letter-spacing: .035em; }
}

@media (hover: none), (pointer: coarse) {
  [data-tilt] { transform: none !important; }
  [data-glow]::before { display: none; }
  .button { transform: none !important; }
  .service-card:hover, .project-card:hover, .team-card:hover { --lift: 0px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translate3d(0, 28px, -18px) scale(.985); filter: blur(4px); transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
  .reveal.is-visible { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-orb, .tech-orbit, .object-core, .discipline-rail > div, .page-hero::after, .error-code, .seismic-wave::before, .seismic-wave::after, .seismic-reticle, [data-quake-country], body.v4 .home-hero::before { animation: none !important; }
  body.v4.page-home .particle-field { opacity: .32; }
  .pointer-light, .hero-blueprint, .page-hero::before { display: none; }
  [data-tilt], .hero-image, .project-hero-media img, .button { transform: none !important; }
  .process-grid li { opacity: 1; }
}

@media print {
  .ambient-scene, .pointer-light, .discipline-rail, .hero-tech-panel, .hero-blueprint, .scroll-progress, .service-object { display: none !important; }
}