/* Self-hosted Alexandria variable font: shared by Arabic and English. */
@font-face {
    font-family: "Alexandria";
    src: url("fonts/alexandria-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --font-site: "Alexandria", Arial, sans-serif;
    /* Alexandria's broad forms need a calmer scale than the previous fonts. */
    --type-display: clamp(2.125rem, 1.45rem + 2.8vw, 3.75rem);
    --type-section: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    --type-card: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    --tracking-heading: -.025em;
    --leading-heading: 1.25;
    --leading-body: 1.8;
    font-family: var(--font-site);
    font-optical-sizing: auto;
    font-synthesis: none;
    color: #edf2f5;
    background: #060a0e;
    --muted: #a2b0bc;
    --cyan: #8cd9f4;
    --line: #ffffff1c;
}
button, input, select, textarea { font: inherit; }
* { box-sizing: border-box; }
body { margin: 0; font-weight: 400; line-height: var(--leading-body); }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cyan); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); text-wrap: balance; }
h3 { font-weight: 550; }
html[lang=ar] { --tracking-heading: normal; --leading-heading: 1.45; --leading-body: 1.9; }
html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3 { letter-spacing: normal; }
html[lang=ar] .navigation a, html[lang=ar] .mobile-menu>summary { font-weight: 400; letter-spacing: normal; }
h1 { font-size: var(--type-display); }
.hero h1 { font-size: clamp(44px, 4.7vw, 72px); line-height: 1.32; font-weight: 500; }
h2 { font-size: var(--type-section); }
h2 span { color: #8d9ba8; }
h1:focus { outline: none; }
.skip { position: fixed; top: -80px; background: #13212b; padding: 15px; z-index: 20; }
.skip:focus { top: 0; }
.navigation { position: sticky; top: 0; z-index: 10; background: #060a0eea; backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.navigation nav { max-width: 1440px; min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; gap: 24px; }
.navigation a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; color: #c1cbd3; }
.navigation a:hover { color: white; }
.navigation .wordmark { position: relative; width: 96px; height: 48px; flex: 0 0 96px; overflow: hidden; }
/* Show only the dolphin from the original artwork; preserve the source asset. */
.wordmark img { position: absolute; width: 140px; height: 140px; max-width: none; left: -22px; top: -36px; clip-path: inset(0 0 42% 0); filter: invert(1); }
.eyebrow { font-size: 12px; font-weight: 500; margin-bottom: 25px; letter-spacing: .12em; color: var(--cyan); line-height: 1.8; }
.hero { position: relative; isolation: isolate; min-height: min(820px, calc(100svh - 76px)); display: flex; align-items: center; padding: 70px max(40px, calc((100vw - 1360px)/2)) 110px; overflow: hidden; background: #020609; }
.hero-art { position: absolute; inset: 0; margin: 0; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #060a0e, transparent 22%), linear-gradient(270deg, #020609e6, #02060980 42%, transparent 65%); }
.hero-intro { width: 44%; max-width: 660px; margin-left: auto; text-align: start; }
html[dir=ltr] .hero-intro { margin-right: 0; }
html[lang=en] .hero h1 { font-size: clamp(42px, 4.4vw, 68px); }
.hero h1 span { color: #a5dcf0; }
.hero-copy { color: #b7c5cf; font-size: 16px; line-height: var(--leading-body); margin: 24px 0 30px; max-width: 500px; }
.signal { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px #7cdaff; margin-inline-end: 8px; vertical-align: middle; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 54px; padding: 14px 24px; background: #e1f4fb; color: #09141d; font-size: 15px; font-weight: 600; border-radius: 2px; }
.button:hover { background: #bce8fa; color: #09141d; }
.button span { font-size: 22px; }
.text-link { min-height: 48px; display: inline-flex; align-items: center; border-bottom: 1px solid #738490; font-size: 14px; }
.hero-footer { position: absolute; bottom: 25px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; color: #a9bbc8; font-size: 11px; letter-spacing: .09em; gap: 20px; }
.hero-footer a { padding: 10px 0; }
.hero-footer a span { margin-inline-start: 20px; }
.vision-world { position: relative; isolation: isolate; overflow: hidden; background: #080b12; color: #f5f3fa; padding: 85px 24px 70px; display: flex; flex-direction: column; }
.vision-message { order: 0; position: relative; z-index: 20; text-align: center; }
.vision-message .eyebrow { color: #b3a2cf; margin-bottom: 18px; font-size: 11px; }
.vision-message h2 { font-size: clamp(20px, 3.8vw, 60px); white-space: nowrap; font-weight: 500; line-height: 1.2; }
.vision-message h2 span { display: inline; color: #b99bdf; }
html[lang=ar] .vision-message h2 { line-height: 1.5; font-weight: 500; }
.vision-gallery { order: 1; position: relative; isolation: isolate; width: 100%; max-width: 1040px; height: 550px; margin: 25px auto 0; pointer-events: none; direction: ltr; }
.vision-gallery::before, .vision-gallery::after { content: ""; position: absolute; z-index: -2; border-radius: 50%; pointer-events: none; filter: blur(24px); opacity: .85; }
.vision-frost { position: absolute; z-index: -1; inset: -12px -30px; border-radius: 36px; border: 1px solid #e9e4ff30; background: linear-gradient(125deg, #eee6ff12, #bcc5e607 45%, #ffcab20e); backdrop-filter: blur(38px) saturate(1.3); -webkit-backdrop-filter: blur(38px) saturate(1.3); box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #f5b6ff15, 0 28px 80px #0003; overflow: hidden; }
.vision-frost::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 10%, #ffffff08 34%, transparent 49%, #ffffff04 72%, transparent 85%); }
.vision-gallery::before { width: 270px; height: 270px; top: 35px; left: 16%; background: radial-gradient(circle at 32% 25%, #d5a0ff, #851ee6 45%, #34177c 78%); box-shadow: 0 0 100px #7d2ce635; }
.vision-gallery::after { width: 185px; height: 185px; right: 17%; bottom: 20px; background: radial-gradient(circle at 30% 25%, #ffd29c, #ff7948 50%, #d83568); box-shadow: 0 0 90px #fd62582b; }
.vision-tile { position: absolute; left: 50%; top: 48%; width: 180px; height: 220px; padding: 12px; border-radius: 24px; border: 1px solid #ffffff65; background: linear-gradient(135deg, #ffffff27, #c7b1fa0d 55%, #ffffff12); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #d9a5ff32, 0 18px 50px #0005; transform: translate(-50%, -50%) translateX(calc((var(--index) - 5) * 28px)) rotate(calc((var(--index) - 5) * 4deg)); }
.vision-photo { display: block; height: 154px; border-radius: 13px; opacity: .96; background-image: url('/delfe-industries.png'); background-size: 300% 300%; background-position: inherit; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px #ffffff35; }
.vision-tile::after { content: 'DELFE / ' attr(data-index); position: absolute; left: 20px; bottom: 24px; color: #ffffffa8; font: 10px var(--font-site); letter-spacing: .18em; }
.vision-glint { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(125deg, #ffffff20, transparent 40%, transparent 70%, #f9c6ff12); pointer-events: none; }
.tile-1 { --index: 1; background-position: 0 0; }.tile-2 { --index: 2; background-position: 50% 0; }.tile-3 { --index: 3; background-position: 100% 0; }
.tile-4 { --index: 4; background-position: 0 50%; }.tile-5 { --index: 5; background-position: 50% 50%; }.tile-6 { --index: 6; background-position: 100% 50%; }
.tile-7 { --index: 7; background-position: 0 100%; }.tile-8 { --index: 8; background-position: 50% 100%; }.tile-9 { --index: 9; background-position: 100% 100%; }
@media (max-width: 600px) {
    .vision-world { padding: 60px 20px 35px; }
    .vision-message h2 { font-size: clamp(16px, 4.3vw, 26px); }
    .vision-gallery { height: 490px; margin-top: 15px; }
    .vision-frost { inset: -5px -10px; border-radius: 24px; backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); }
    .vision-gallery::before, .vision-gallery::after { filter: blur(18px); }
    .vision-tile { width: 110px; height: 146px; padding: 8px; border-radius: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .vision-photo { height: 94px; border-radius: 10px; }
    .vision-tile::after { font-size: 7px; bottom: 17px; left: 10px; }
    .vision-gallery::before { width: 170px; height: 170px; left: 0; top: 40px; }
    .vision-gallery::after { width: 120px; height: 120px; right: 0; bottom: 25px; }
}
.ecosystem { padding: 100px 40px 85px; background: radial-gradient(ellipse at 50% 45%, #102535 0%, #080e14 55%); border-block: 1px solid var(--line); overflow: hidden; }
.section-title { text-align: center; max-width: 950px; margin: auto; }
.section-title>p:last-child { color: var(--muted); font-size: 18px; margin-top: 22px; line-height: 1.9; }
.system-map { position: relative; max-width: 1000px; margin: 40px auto 50px; padding: 35px 20px; direction: ltr; }
.system-map::before { content: ""; position: absolute; inset: 8% 10%; background: radial-gradient(ellipse, #58c8e625, transparent 65%); filter: blur(30px); pointer-events: none; }
.glass-stack { position: relative; width: min(560px, 90%); height: 490px; margin: auto; }
.glass-layer { position: absolute; width: 100%; height: 220px; border: 1px solid #c5f1ff60; border-radius: 20px; background: linear-gradient(125deg, #b9eaff1c, #50859b12 48%, #a4e4ff21); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #87def536, 0 22px 50px #00000040; transform: skewY(-6deg); overflow: hidden; }
.glass-layer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 15%, #e6faff10 36%, transparent 52%); pointer-events: none; }
.layer-data { top: 0; left: -24px; z-index: 4; background: linear-gradient(125deg, #719cb337, #183546a6 65%, #5b9bb832); }
.layer-knowledge { top: 85px; left: -8px; z-index: 3; }
.layer-work { top: 170px; left: 8px; z-index: 2; }
.layer-decision { top: 255px; left: 24px; z-index: 1; }
.glass-brand { position: absolute; inset: 0 0 55px; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: skewY(6deg); }
.glass-brand img { width: 165px; height: 145px; object-fit: contain; filter: invert(1); }
.glass-brand>span { font-size: 8px; letter-spacing: .22em; color: #c0dce9; margin-top: -12px; }
.layer-label { position: absolute; bottom: 0; inset-inline: 0; display: flex; align-items: center; gap: 18px; padding: 25px 30px; font-size: 15px; color: #e2f3fb; }
.layer-label b { color: #97bccc; font-size: 11px; font-weight: 400; }
.layer-label i { margin-left: auto; width: 36px; height: 3px; border-radius: 3px; background: #93dcf2; box-shadow: 0 0 16px #8edaf755; }
.system-steps { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; }
.system-steps article { padding-top: 28px; border-top: 1px solid #6094ad45; }
.system-steps article>span { display: block; direction: ltr; text-align: start; color: #73a9c1; font-size: 10px; letter-spacing: .13em; }
.system-steps h3 { margin: 18px 0 12px; font-size: 27px; }
.system-steps p { font-size: 16px; color: var(--muted); line-height: 1.9; }
.applications { max-width: 1280px; margin: auto; padding: 120px 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; }
.applications-heading>p:last-child { margin-top: 25px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.use-cases { border-top: 1px solid var(--line); }
.use-cases details, .faq-list details { border-bottom: 1px solid var(--line); }
.use-cases summary, .faq-list summary { list-style: none; display: flex; align-items: center; gap: 22px; padding: 28px 0; cursor: pointer; font-size: 23px; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
.case-number { font-size: 11px; color: #7995a6; }
.case-toggle { margin-inline-start: auto; color: #b8dded; font-size: 25px; transition: transform .2s; }
details[open] .case-toggle { transform: rotate(45deg); }
details[open] summary { color: var(--cyan); }
.case-body { padding: 0 34px 28px; }
.case-body p { color: #a7b7c3; font-size: 17px; line-height: 1.95; }
.case-body>span { display: block; margin-top: 22px; font-size: 12px; color: #7fa8bc; }
.principles { padding: 90px max(40px, calc((100vw - 1200px)/2)); background: #0a1016; border-block: 1px solid var(--line); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 55px; }
.values article>span { color: #688b9e; font-size: 13px; }
.values h3 { font-size: 24px; margin: 18px 0; }
.values p { color: var(--muted); line-height: 1.9; font-size: 16px; }
.closing { position: relative; overflow: hidden; text-align: center; padding: 80px 24px 100px; background: radial-gradient(ellipse at 50% 100%, #142c3c, transparent 65%); }
.closing>img { width: 130px; height: 130px; object-fit: contain; filter: invert(1); opacity: .8; }
.closing h2 { font-size: var(--type-display); }
.closing p:not(.eyebrow) { margin: 26px auto; max-width: 600px; line-height: 1.9; font-size: 17px; color: var(--muted); }
.closing a { display: inline-flex; align-items: center; min-height: 48px; border-bottom: 1px solid #688b9e; font-size: 14px; }
footer { max-width: 1280px; margin: auto; padding: 0 40px 20px; color: #92a4b2; font-size: 12px; }
footer>div { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 22px 0; }
footer strong { color: #e0e9ef; font-size: 20px; letter-spacing: .06em; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
#blazor-error-ui { display: none; }
.desktop-links { display: flex; gap: 32px; align-items: center; }
.nav-tools { display: flex; align-items: center; gap: 12px; }
.navigation .language-switch { padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.navigation a[data-section] { position: relative; }
.navigation a[aria-current=location] { color: #c7efff; }
.desktop-links a[aria-current=location]::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: var(--cyan); }
.reading-progress { position: absolute; bottom: -1px; inset-inline-start: 0; width: 100%; height: 2px; transform: scaleX(var(--reading-progress, 0)); transform-origin: left; background: linear-gradient(90deg, #6b9daf, #b1e8fc); pointer-events: none; }
html[dir=rtl] .reading-progress { transform-origin: right; }
.mobile-menu { display: none; }
section[tabindex="-1"]:focus, main:focus { outline: none; }
h1, h2, h3 { text-wrap: balance; }
.hero-copy, .case-body, .values p { text-wrap: pretty; }
.button { border-radius: 8px; transition: background .18s, box-shadow .18s; }
.button:hover { box-shadow: 0 5px 24px #8bd8f51a; }
.button:active { background: #a0d5e9; }
.use-cases summary:hover, .faq-list summary:hover { color: #d6f2ff; }
.use-cases details[open] { background: linear-gradient(90deg, transparent, #8ccfed05); }
.case-example { margin-top: 24px; border: 1px solid #97d2ea24; border-radius: 12px; padding: 20px; background: #0f1d27; }
.case-example>span { display: block; font-size: 10px; letter-spacing: .08em; color: #98bfd1; margin-bottom: 12px; }
.case-example strong { font-size: 16px; font-weight: 500; line-height: 1.8; color: #e0eff7; }
.case-example p { font-size: 14px; margin-top: 8px; color: #a9bac6; }
.faq-section { max-width: 1280px; margin: auto; padding: 90px 40px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; }
.faq-intro { color: var(--muted); font-size: 17px; line-height: 1.9; margin-top: 20px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list summary { font-size: 20px; }
.faq-list .case-body { padding-inline: 0; }
.closing-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 25px; margin-top: 30px; }
.closing .button { border-bottom: 0; min-height: 54px; }
@supports not (backdrop-filter: blur(1px)) {
    .glass-layer { background-color: #18303e; }
}
@media (max-width: 900px) {
    .navigation nav { min-height: 68px; padding: 0 20px; gap: 12px; }
    .navigation .wordmark { width: 82px; height: 44px; flex-basis: 82px; }
    .wordmark img { width: 120px; height: 120px; left: -19px; top: -30px; }
    .desktop-links { display: none; }
    .mobile-menu { display: block; }
    .mobile-menu>summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font-size: 13px; cursor: pointer; }
    .menu-icon { width: 14px; height: 10px; border-block: 1px solid #bbcfdd; transition: transform .2s; }
    .mobile-menu[open] .menu-icon { transform: rotate(90deg); }
    .mobile-links { position: absolute; top: calc(100% + 8px); inset-inline: 12px; padding: 12px; background: #0b151ff5; backdrop-filter: blur(24px); border: 1px solid #96c8e033; border-radius: 16px; box-shadow: 0 24px 70px #0009; max-height: calc(100dvh - 100px); overflow-y: auto; }
    .navigation .mobile-links a { display: flex; width: 100%; padding: 12px 16px; justify-content: space-between; min-height: 54px; font-size: 16px; border-radius: 8px; }
    .mobile-links a:hover, .mobile-links a[aria-current] { background: #a9d9ed0c; }
    .mobile-links a span { color: #88a9bd; font-size: 11px; }
    .mobile-links p { padding: 15px 16px 5px; border-top: 1px solid var(--line); font-size: 12px; color: #a1b5c2; line-height: 1.7; margin-top: 8px; }
    .faq-section { grid-template-columns: 1fr; gap: 30px; padding: 65px 24px; }
}
@media (max-width: 1050px) {
    .hero { min-height: 680px; padding-inline: 32px; }
    .hero-intro { width: 50%; }
    .hero h1 { font-size: 56px; }
    .applications { gap: 40px; }
}
@media (max-width: 700px) {
    html { scroll-padding-top: 88px; }
    .hero { display: block; min-height: 780px; padding: 32px 24px 389px; }
    .hero-intro { width: 100%; max-width: 100%; margin: 0; }
    .hero h1, html[lang=en] .hero h1 { font-size: clamp(38px, 9vw, 54px); }
    .hero .eyebrow { font-size: 10px; margin-bottom: 18px; }
    .hero-copy { font-size: 16px; margin: 20px 0 25px; }
    .hero-art { top: auto; bottom: 35px; height: 330px; }
    .hero-art img { object-position: 18% center; }
    .hero::after { background: linear-gradient(180deg, #020609 0%, transparent 50%, transparent 85%, #060a0e 99%); pointer-events: none; }
    .hero-footer { left: 24px; right: 24px; bottom: 12px; font-size: 8px; }
    .hero-footer a { font-size: 10px; }.hero-footer a span { margin-inline-start: 8px; }
    .hero-actions { gap: 20px; }.button { gap: 18px; font-size: 14px; }
    .applications { display: block; padding: 70px 24px; }
    .ecosystem { padding: 65px 24px; }.section-title { text-align: start; }.section-title>p:last-child { font-size: 16px; }
    .system-map { margin: 30px auto; padding: 25px 12px; }
    .glass-stack { width: calc(100% - 24px); height: 390px; }
    .glass-layer { height: 180px; border-radius: 14px; }
    .layer-data { left: -12px; }
    .layer-knowledge { top: 65px; left: -4px; }
    .layer-work { top: 130px; left: 4px; }
    .layer-decision { top: 195px; left: 12px; }
    .glass-brand { bottom: 48px; }
    .glass-brand img { width: 135px; height: 120px; }
    .glass-brand>span { font-size: 7px; }
    .layer-label { padding: 20px; gap: 12px; font-size: 13px; }
    .layer-label i { width: 25px; }
    .system-steps { grid-template-columns: 1fr; gap: 28px; }.system-steps h3 { font-size: 25px; }
    .use-cases { margin-top: 35px; }summary { font-size: 21px; gap: 15px; }.case-body { padding-inline: 0; }
    .principles { padding: 65px 24px; }.values { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; }.values article { border-top: 1px solid var(--line); padding-top: 20px; }
    .closing { padding: 50px 24px 70px; }.closing .eyebrow { font-size: 10px; }
    footer { padding-inline: 24px; }footer>div { flex-wrap: wrap; gap: 12px; }
    .hero-actions { gap: 14px 24px; }
    .system-map { margin-block: 22px; }
    .applications { padding-block: 60px; }
    .case-body { padding-bottom: 22px; }
    .case-example { padding: 17px; }
    .faq-list summary { font-size: 18px; padding-block: 23px; }
    .closing-actions { flex-direction: column; gap: 16px; }
    .closing-actions .button { width: min(100%, 320px); }
}
@media (min-width: 701px) and (max-width: 900px) {
    .hero { display: block; min-height: 0; padding: 45px 40px 424px; }
    .hero-intro { width: 100%; max-width: 620px; margin: 0; }
    .hero-art { top: auto; bottom: 30px; height: 370px; }
    .hero-art img { object-position: 18% center; }
    .hero::after { background: linear-gradient(180deg, #020609 0%, transparent 55%, transparent 85%, #060a0e 99%); }
    .hero-copy { max-width: 590px; }
    .hero-footer { bottom: 12px; }
}
@media (max-width: 360px) {
    .navigation nav { padding-inline: 12px; gap: 8px; }
    .nav-tools { gap: 8px; }
    .navigation .language-switch, .mobile-menu>summary { padding-inline: 10px; font-size: 12px; }
    .hero { padding-inline: 20px; }
    .hero h1, html[lang=en] .hero h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
.contact-form { max-width: 720px; margin: 40px auto 0; text-align: start; padding: 30px; border: 1px solid #ffffff25; border-radius: 22px; background: #ffffff05; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contact-wide { grid-column: 1 / -1; }
.contact-field label { font-size: 14px; color: #d5e3ed; }
.contact-field input, .contact-field textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid #ffffff30; border-radius: 10px; color: #edf2f5; background: #070d14a6; font: inherit; font-size: 16px; }
.contact-field textarea { resize: vertical; min-height: 150px; }
.contact-field input:focus, .contact-field textarea:focus { outline: 2px solid #8cd9f4; outline-offset: 2px; }
.contact-field .invalid { border-color: #f6aaaa; }
.contact-field .validation-message, .contact-error { color: #ffbaba; font-size: 13px; line-height: 1.7; }
.closing .contact-privacy { margin: 22px 0; font-size: 12px; max-width: none; }
.contact-submit { border: 0; cursor: pointer; border-radius: 10px; font: inherit; font-size: 15px; margin-top: 8px; }
.contact-submit:focus-visible { outline: 2px solid #8cd9f4; outline-offset: 5px; }
.contact-error { margin-bottom: 18px; }
.contact-result { max-width: 720px; margin: 40px auto; padding: 30px; border: 1px solid #8cd9f44d; border-radius: 18px; background: #8cd9f40a; }
.contact-trap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) { .contact-form { padding: 22px 16px; }.contact-fields { grid-template-columns: 1fr; gap: 20px; }.contact-submit { width: 100%; }.closing #contact-title { font-size: 36px; } }

/* Photographic glass backdrops share the existing Gulf imagery. */
.glass-scene { position: relative; isolation: isolate; overflow: hidden; }
.glass-scene::before, .glass-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.glass-scene::before { z-index: -2; background-image: url('/delfe-industries.png'); background-size: 300% 300%; background-position: var(--scene-position); opacity: .55; }
.glass-scene::after { z-index: -1; background: linear-gradient(110deg, #080e14ed, #101b2ba3 52%, #080e14de); backdrop-filter: blur(5px) saturate(.8); -webkit-backdrop-filter: blur(5px) saturate(.8); box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -1px 0 #ffffff0f; }
.scene-knowledge { --scene-position: 50% 50%; }
.scene-business { --scene-position: 0 100%; }
.scene-contact { --scene-position: 100% 0; }
.scene-business .values article { padding: 24px; border: 1px solid #ffffff20; border-radius: 20px; background: #101b2b78; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #ffffff12; }
.scene-contact::after { background: linear-gradient(180deg, #080e14c9, #0c1723bd 45%, #080e14ed); }
.scene-contact .contact-form { background: #0c1723c9; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
@media (max-width: 600px) {
    .glass-scene::before { opacity: .4; }
    .glass-scene::after { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .scene-business .values article { padding: 22px; }
}

/* Animate separate pieces of the original logo, keeping its body still. */
.navigation .wordmark { overflow: visible; }
.dolphin-mark { display: block; width: 100%; height: 100%; overflow: visible; }
/* Fade imagery into a shared canvas instead of dividing sections with rules. */
.vision-world { background: linear-gradient(180deg, #060a0e, #080b12 140px, #080b12 calc(100% - 140px), #060a0e); }
.glass-scene { --section-fade: 130px; background: #060a0e; border-block: 0; }
.glass-scene::before, .glass-scene::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--section-fade), #000 calc(100% - var(--section-fade)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--section-fade), #000 calc(100% - var(--section-fade)), transparent);
}
.glass-scene::after { box-shadow: none; }
footer>div { border-top: 0; }
@media (max-width: 600px) {
    .glass-scene { --section-fade: 80px; }
    .vision-world { background: linear-gradient(180deg, #060a0e, #080b12 80px, #080b12 calc(100% - 80px), #060a0e); }
}

/* One continuous swimming silhouette; the tail flex travels through the body. */
.dolphin-silhouette { transform-origin: 680px 550px; animation: dolphin-flow 3.2s ease-in-out infinite; }
@keyframes dolphin-flow {
    0%, 100% { transform: translateY(-8px) rotate(-1deg);
        d: path("M198 337 C222 380 277 365 303 412 C326 369 381 386 407 351 C405 413 365 435 341 457 C300 503 372 550 442 561 C514 575 588 546 638 524 C663 511 642 479 612 466 C655 432 715 469 765 508 C806 525 908 522 966 570 C995 593 1001 620 1023 635 C1059 648 1059 667 1039 671 C1009 674 982 650 937 652 C883 652 854 662 825 681 C780 709 736 722 696 709 C735 691 759 666 771 639 C714 639 657 663 590 666 C482 678 392 640 344 583 C319 552 307 516 300 494 C284 449 257 440 231 416 C205 394 197 369 198 337 Z");
    }
    50% { transform: translateY(8px) rotate(1deg);
        d: path("M198 407 C222 450 277 435 303 482 C326 439 381 456 407 421 C405 483 365 485 341 507 C300 533 372 565 442 568 C514 578 588 549 638 527 C663 514 649 485 623 472 C665 443 715 473 765 511 C806 528 908 525 966 573 C995 596 1001 623 1023 638 C1059 651 1059 670 1039 674 C1009 677 982 653 937 655 C883 655 854 665 825 678 C780 697 744 704 709 691 C744 678 762 659 771 642 C714 642 657 666 590 669 C482 681 392 660 344 613 C319 590 307 566 300 544 C284 499 257 510 231 486 C205 464 197 439 198 407 Z");
    }
}
.vision-world { display: grid; place-items: center; padding: 50px 24px; }
.vision-gallery, .vision-message { grid-area: 1 / 1; }
.vision-gallery { height: 760px; max-width: 1200px; margin: 0 auto; }
.vision-frost { inset: 30px 0; border: 0; box-shadow: none; border-radius: 50%; background: radial-gradient(ellipse, #17243350, transparent 70%); }
.vision-gallery::before { left: 8%; top: 10%; opacity: .55; }
.vision-gallery::after { right: 8%; bottom: 12%; opacity: .5; }
.vision-message { z-index: 100; width: min(540px, 70vw); padding: 40px 12px; border-radius: 50%; background: radial-gradient(ellipse, #080b12f2 25%, #080b12cc 55%, transparent 74%); }
.vision-message h2 { font-size: clamp(26px, 3.4vw, 48px); white-space: normal; text-wrap: balance; text-shadow: 0 2px 25px #000; }
.vision-message h2 span { color: #b9dce8; }
.vision-message .eyebrow { letter-spacing: .12em; color: #96a9c3; }
.vision-tile { width: 164px; height: 205px; border-color: #e5ecff40; box-shadow: inset 0 1px 0 #ffffff50, 0 24px 70px #0007; }
.vision-photo { height: 143px; }
.vision-tile::after { color: #c5d5df99; font-size: 8px; }
.hero-art img { filter: saturate(.85) contrast(1.07); }
.scene-business .values article { background: linear-gradient(145deg, #23334680, #081019a8); box-shadow: inset 0 1px 0 #d4eeff20, 0 20px 50px #0003; }
.section-title h2, .principles>h2, #contact-title { text-shadow: 0 4px 40px #93cde51a; }
@media (max-width: 600px) {
    .vision-world { padding: 30px 16px; }
    .vision-gallery { height: 640px; }
    .vision-message { width: min(290px, 85vw); padding: 40px 10px; }
    .vision-message h2 { font-size: clamp(23px, 6.4vw, 30px); }
    .vision-message .eyebrow { font-size: 9px; margin-bottom: 12px; }
    .vision-tile { width: 88px; height: 116px; padding: 6px; border-radius: 16px; }
    .vision-photo { height: 77px; border-radius: 10px; }
    .vision-tile::after { font-size: 6px; left: 12px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dolphin-silhouette { animation: none; } }

/* Keep the bilingual brand lockup in one consistent reading direction. */
.navigation .wordmark { display: flex; align-items: center; gap: 12px; width: auto; flex: 0 0 auto; direction: ltr; }
.wordmark .dolphin-mark { width: 86px; height: 46px; flex: 0 0 86px; }
.wordmark .brand-name { font-family: var(--font-site); font-size: 20px; font-weight: 650; letter-spacing: .08em; white-space: nowrap; color: #edf2f5; }
@media (max-width: 600px) {
    .navigation .wordmark { gap: 7px; }
    .wordmark .dolphin-mark { width: 50px; height: 38px; flex-basis: 50px; }
    .wordmark .brand-name { font-size: 14px; letter-spacing: .05em; }
}

/* Generated holographic motion sits behind the existing readable hero overlay. */
.hero-art .hero-hologram { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 2.5s ease; filter: saturate(.65) brightness(.88); pointer-events: none; }
.hero-art .hero-hologram.is-playing { opacity: 1; }
@media (max-width: 900px) {
    .hero-art .hero-hologram { object-position: 18% center; }
}
@media (prefers-reduced-motion: reduce) { .hero-art .hero-hologram { display: none; } }

@media (min-width: 901px) {
    .hero::after { background: linear-gradient(0deg, #060a0e, transparent 22%), linear-gradient(270deg, #020609f2, #020609bd 38%, #02060935 60%, transparent 75%); }
}

/* Give the animated dolphin and copy separate areas, in both reading directions. */
@media (min-width: 1101px) {
    .hero-art { right: max(44%, calc((100% - 1360px)/2 + 600px)); overflow: hidden; -webkit-mask-image: linear-gradient(to right,#000 88%,transparent); mask-image: linear-gradient(to right,#000 88%,transparent); }
    .hero-art img,.hero-art .hero-hologram { object-position: 18% center; }
    .hero-intro { width: 40%; min-width: 0; }
    .hero::after { pointer-events: none; background: linear-gradient(0deg,#060a0e,transparent 22%),linear-gradient(270deg,#020609,transparent 48%); }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .hero { display: block; min-height: 0; padding: 45px 40px 420px; }
    .hero-intro { width: 100%; max-width: 680px; margin: 0; }
    .hero-art { top: auto; bottom: 30px; height: 370px; }
    .hero-art img,.hero-art .hero-hologram { object-position: 18% center; }
    .hero::after { pointer-events: none; background: linear-gradient(180deg,#020609,transparent 55%,transparent 85%,#060a0e 99%); }
}