/* Norfaro. One theme (dark navy), one accent (gold), one radius rule: interactive elements are pills, everything else is square.
   Tokens from the live holding page; Gece Laciverti scale for lines and surfaces. */
:root {
  color-scheme: dark;
  --bg: #0b1424; --bg2: #101d33; --surface: #16202f;
  --ink: #e8e3d6; --muted: #9aa4b5; --faint: #8090a6; --line: #263349;
  --gold: #c9a45c; --gold-ink: #e2c186; --gold-soft: rgba(201, 164, 92, .14); --on-gold: #14100a;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --mono: 'Space Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box }
html { background: var(--bg); color: var(--ink); scroll-behavior: auto }
body { margin: 0; font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit; text-decoration: none }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0 }   /* Manrope: 600, never heavier; headings tightened by .02em only */
h2 { font-size: clamp(30px, 2.6vw, 36px) }
.wrap { width: min(1280px, 100% - 2 * clamp(20px, 5vw, 72px)); margin: 0 auto }
.kayit ::-webkit-scrollbar { display: none } .kayit { scrollbar-width: none }
.cekim * { animation: none !important; transition: none !important }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: 999px }

/* header */
.head { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 68px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(16px, 2.5vw, 32px); pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s }
.opened .head { opacity: 1; transform: none }
.head > * { pointer-events: auto }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: 0; font-size: 19px }
.brand .emblem { width: 38px; height: 38px; fill: none; stroke: var(--gold); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(201, 164, 92, .35)) }
.brand .emblem circle:first-child { stroke-width: 1.6; stroke: rgba(201, 164, 92, .55) }
.brand .e-star { fill: #fff1d6; stroke: none; filter: drop-shadow(0 0 3px rgba(255, 241, 214, .9)) }
.pill { display: flex; align-items: center; gap: 16px; padding: 11px 20px; border: 1px solid rgba(232, 227, 214, .22); border-radius: 999px; background: rgba(11, 20, 36, .5); backdrop-filter: blur(10px); font-size: 15px; font-weight: 600 }
.pill i { display: block; width: 24px; height: 1px; background: rgba(232, 227, 214, .45) }
.pill a { position: relative } .pill a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: var(--gold-ink); transition: right .3s var(--ease) } .pill a:hover::after { right: 0 }

/* buttons: one CTA intent on the page (İletişim) */
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font: 600 15px/1 var(--sans); border: 0; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background .25s }
.cta::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease) }
.cta:hover { background: var(--gold-ink) } .cta:hover::after { transform: rotate(45deg) translate(2px, -2px) } .cta:active { transform: scale(.97) }

/* world stage */
.pw { position: relative; height: 540vh }
.pw-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden }
#pw-canvas { display: block; width: 100%; height: 100% }
.ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease) }
.ov::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 11, 24, .86) 0%, rgba(6, 11, 24, .62) 36%, rgba(6, 11, 24, 0) 64%), linear-gradient(0deg, rgba(6, 11, 24, .75) 0%, rgba(6, 11, 24, 0) 48%); pointer-events: none }
.ov > * { position: relative }
.ov-hero h1, .ov-services h2, .ov-method h2, .ov-works h2 { text-shadow: 0 2px 24px rgba(6, 11, 24, .6) }
.ov.on { opacity: 1 }
.ov-in { pointer-events: auto }
.ov-hero { display: grid; align-content: end; padding: 0 clamp(20px, 5vw, 72px) 12vh }
.ov-hero h1 { font-size: clamp(36px, 4.4vw, 64px); max-width: 17ch; opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s }
.ov-hero p { margin: 18px 0 26px; color: #d3d9e2; text-shadow: 0 1px 12px rgba(6, 11, 24, .8); font-size: clamp(17px, 1.25vw, 18px); line-height: 1.6; max-width: 44ch; opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .3s, transform .9s var(--ease) .3s }
.ov-hero .cta { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease) .42s, transform .9s var(--ease) .42s }
.ov-hero .more { display: inline-block; margin-left: 22px; color: #d3d9e2; font-size: 15px; border-bottom: 1px solid rgba(232, 227, 214, .35); text-shadow: 0 1px 12px rgba(6, 11, 24, .8); opacity: 0; transition: opacity .9s var(--ease) .5s } .ov-hero .more:hover { color: var(--ink); border-color: var(--gold-ink) }
.opened .ov-hero h1, .opened .ov-hero p, .opened .ov-hero .cta, .opened .ov-hero .more { opacity: 1; transform: none }
.ov-services { display: grid; align-content: center; padding: 0 clamp(20px, 5vw, 72px) }
.ov-services .ov-in { max-width: 720px }
.services { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px }
.services div { max-width: 34ch } .services dt { font-weight: 600; font-size: 17px; margin-bottom: 4px } .services dd { margin: 0; color: #c9d1dc; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 12px rgba(6, 11, 24, .8) }
.ov-services h2 { font-size: clamp(30px, 2.6vw, 36px) }
.ov-works { display: grid; align-content: start; padding: 14vh clamp(20px, 5vw, 72px) 0 }
.pw-label { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 32px; font: 400 13px/1.5 var(--mono); color: var(--gold-ink); opacity: 0; transition: opacity .35s; max-width: 70vw }
.pw-label::before { content: ''; display: inline-block; width: 34px; height: 1px; background: var(--gold-ink); vertical-align: middle; margin-right: 12px }
.ov-method { display: grid; align-content: start; padding: 16vh clamp(20px, 5vw, 72px) 0 }
.ov-method .ov-in { max-width: 560px }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s }
.steps li { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: baseline }
.steps b { font-weight: 600; font-size: 18px } .steps span { color: #c9d1dc; font-size: 15px; line-height: 1.55; text-shadow: 0 1px 12px rgba(6, 11, 24, .8) }

/* static composition (?cekim, reduced motion, no WebGL2): the same content, laid out plainly */
.pw-still { display: none }
.pw-static .pw-stage, .cekim .pw-stage { display: none }
.pw-static, .cekim .pw { height: auto }
.pw-static .pw-still, .cekim .pw-still { display: block; padding: 20vh 0 10vh; background: linear-gradient(180deg, rgba(11, 20, 36, .55), rgba(11, 20, 36, .97) 70%), url(../media/plates/p1-1920.jpg) center top / cover no-repeat }
.pw-still .s-h1 { font-size: clamp(36px, 4.4vw, 64px); max-width: 15ch; font-weight: 600; letter-spacing: -.02em; line-height: 1.1 } .pw-still p { color: var(--muted); max-width: 44ch; margin: 18px 0 64px }
.pw-still h2 { margin-top: 64px } .pw-still .services { max-width: 760px }

/* works index: a horizontal row the reader can scan, different family from the lists above */
.works-index { padding: 16vh 0 6vh }
.works-head { display: flex; align-items: end; justify-content: space-between; gap: 16px }
.works-nav { display: flex; gap: 8px } .works-nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(232, 227, 214, .3); background: rgba(11, 20, 36, .5); color: var(--ink); cursor: pointer; font-size: 18px; line-height: 1; transition: background .25s, transform .25s } .works-nav button:hover { background: rgba(232, 227, 214, .12) } .works-nav button:active { transform: scale(.95) }
.works-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px }
.works-grid a, .works-grid div { display: block } .works-grid img, .works-grid video { width: 100%; height: auto; aspect-ratio: 1.58; object-fit: cover; display: block; border: 1px solid var(--line); background: #0d1626; transition: transform .5s var(--ease) }
.works-grid a:hover img, .works-grid a:hover video { transform: scale(1.015) }
.works-grid figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px } .works-grid figcaption span:last-child { color: var(--muted); white-space: nowrap } .works-grid figcaption small { color: var(--muted) }
.works-grid figure { margin: 0 }

/* flow scene. Two clocks: idle loops that never stop (typing, code scroll, steam, fan, rack lights, the orbit, the
   dish pulses, people passing, reactions) and the 16 s story: request typed 2-12, paper plane 10-19, build bar 19-30,
   cube 30-35, cube flies 35-37.5, courier walks 37.5-53, cube into the rack 53-55, walks back 56-68, uplink 58-63,
   downlink 63-69, screen lights 69-75, burst of reactions 70-84. Paused until in view (.on), final state in .still. */
.flow { padding: 14vh 0 8vh; border-top: 1px solid var(--line) }
.lead { color: var(--muted); max-width: 58ch; margin: 18px 0 0; font-size: 17px }
.flow-scene { margin-top: 44px; overflow: hidden }
.fs { width: 100%; height: auto; display: block; fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.fs text { fill: var(--ink); stroke: none; font: 600 21px var(--sans) } .fs .sub { font: 400 15px var(--sans); fill: var(--muted) } .fs .cube-t { font: 700 11px var(--mono); fill: var(--gold-ink) }
.fs .ground { stroke: rgba(201, 164, 92, .3); stroke-dasharray: 2 9 }
/* figures */
.fs .p .torso { fill: #2a3b5c; stroke: var(--gold-ink); stroke-width: 1.6 } .fs .p .collar { stroke: var(--gold-ink); stroke-width: 1.4 }
.fs .p .head { fill: #e2c186; stroke: none } .fs .p .hair { fill: #5a4426; stroke: none } .fs .p .eye { fill: #14100a; stroke: none }
.fs .p .arm { stroke: #e2c186; stroke-width: 7 } .fs .p .leg { stroke: #40557c; stroke-width: 9 } .fs .p .shoe { stroke: #e2c186; stroke-width: 5 }
.fs .bg .torso { fill: #1f2d47 } .fs .bg .head, .fs .bg .arm, .fs .bg .shoe { stroke: #b99a68; fill: #b99a68 } .fs .bg .leg { stroke: #2f405e }
.fs .cube-f { fill: rgba(201, 164, 92, .18) } .fs .cube-l { stroke: var(--gold-ink) }
.fs .tablet, .fs .phone { fill: #16202f } .fs .tablet-lit, .fs .phone-lit { fill: rgba(226, 193, 134, .35); stroke: none; animation: lit 2.4s ease-in-out infinite }
@keyframes lit { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
.fs .bub { fill: #16202f } .fs .typ path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: typ 5s linear infinite } .fs .typ path:nth-child(2) { animation-delay: .6s } .fs .typ path:nth-child(3) { animation-delay: 1.2s }
@keyframes typ { 0%, 8% { stroke-dashoffset: 100 } 34%, 82% { stroke-dashoffset: 0 } 90%, 100% { stroke-dashoffset: 100 } }
.fs .client .body { animation: breathe 3.2s ease-in-out infinite; transform-origin: 0 -80px } @keyframes breathe { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } }
.fs .plane { fill: rgba(201, 164, 92, .3); opacity: 0 } .fs .track { stroke: none; fill: none }
.fs .desk, .fs .chair { stroke-width: 3 } .fs .laptop { fill: #16202f } .fs .mon { fill: #0d1626; stroke-width: 2.6 }
.fs .code path { stroke: rgba(226, 193, 134, .75); stroke-width: 3 } .fs .code { animation: scroll 6s linear infinite } @keyframes scroll { from { transform: translateY(0) } to { transform: translateY(-96px) } }
.fs .mon-glow { fill: rgba(226, 193, 134, .06); stroke: none; animation: lit 3s ease-in-out infinite }
.fs .dev .armA { animation: typeA .36s ease-in-out infinite alternate } .fs .dev .armB { animation: typeB .3s ease-in-out infinite alternate }
@keyframes typeA { from { transform: rotate(-4deg) } to { transform: rotate(4deg) } } @keyframes typeB { from { transform: rotate(3deg) } to { transform: rotate(-4deg) } }
.fs .mug { fill: #16202f } .fs .steam { stroke: rgba(232, 227, 214, .5); stroke-width: 2; animation: steam 2.2s ease-in-out infinite } @keyframes steam { 0% { opacity: 0; transform: translateY(4px) } 40% { opacity: 1 } 100% { opacity: 0; transform: translateY(-12px) } }
.fs .bar { fill: #16202f; stroke: rgba(226, 193, 134, .5); stroke-width: 1.2 } .fs .bar-fill { fill: var(--gold-ink); stroke: none; transform-origin: 556px 256px; transform: scaleX(0); animation: barfill 16s linear infinite } .fs .build { opacity: 0; animation: build 16s linear infinite }
@keyframes build { 0%, 18% { opacity: 0 } 19.5%, 30% { opacity: 1 } 31.5%, 100% { opacity: 0 } } @keyframes barfill { 0%, 19% { transform: scaleX(0) } 30%, 100% { transform: scaleX(1) } }
.fs .cube-pop { transform-origin: 0 0; transform: scale(0); animation: cubepop 16s linear infinite }
@keyframes cubepop { 0%, 30% { transform: scale(0) } 32% { transform: scale(1.18) } 33.5%, 35% { transform: scale(1) } 35.5%, 100% { transform: scale(0) } }

.fs .courier { animation: walk 16s linear infinite } @keyframes walk { 0%, 37.5% { transform: translateX(0); opacity: 1 } 53%, 96% { transform: translateX(118px); opacity: 1 } 97.5% { transform: translateX(118px); opacity: 0 } 98% { transform: translateX(0); opacity: 0 } 100% { transform: translateX(0); opacity: 1 } }
.fs .wrench { opacity: 0; transform-origin: 15px -128px; animation: wrench 16s linear infinite, cArmB 16s linear infinite } @keyframes wrench { 0%, 56% { opacity: 0 } 57%, 95% { opacity: 1 } 96%, 100% { opacity: 0 } }
.fs .panel { fill: #1a2740; animation: panel 16s linear infinite } .fs .panel-l { stroke: rgba(226, 193, 134, .25); stroke-width: 1.4; animation: panel 16s linear infinite } @keyframes panel { 0%, 58% { transform: translateX(0) } 61%, 92% { transform: translateX(14px) } 95%, 100% { transform: translateX(0) } }
.fs .panel-led { stroke: none; fill: rgba(226, 193, 134, .25); animation: pled 16s linear infinite } @keyframes pled { 0%, 58% { fill: rgba(226, 193, 134, .25) } 60%, 62% { fill: #d9534f } 64%, 66% { fill: rgba(226, 193, 134, .25) } 68%, 70% { fill: #d9534f } 72%, 74% { fill: rgba(226, 193, 134, .25) } 76%, 78% { fill: #d9534f } 80%, 100% { fill: #e2c186 } }
.fs .cour .legA { animation: cLegA 16s linear infinite } .fs .cour .legB { animation: cLegB 16s linear infinite } .fs .cour .armA { animation: cArmA 16s linear infinite } .fs .cour .armB { animation: cArmB 16s linear infinite }
.fs .cube-carry { opacity: 0; animation: carry 16s linear infinite } @keyframes carry { 0%, 37% { opacity: 0 } 37.5%, 53% { opacity: 1 } 53.5%, 100% { opacity: 0 } }
.fs .rack { fill: #121c2e; stroke-width: 2.6 } .fs .unit { fill: #1a2740 } .fs .vent { stroke: rgba(226, 193, 134, .25); stroke-width: 1.4 }
.fs .led { fill: rgba(226, 193, 134, .25); stroke: none; animation: led 1.9s steps(2) infinite; animation-delay: var(--d) } @keyframes led { 0%, 100% { fill: rgba(226, 193, 134, .25) } 50% { fill: #e2c186 } }
.fs .fan { animation: spin 1.6s linear infinite } @keyframes spin { to { transform: rotate(360deg) } }
.fs .cube-in { transform-origin: 0 0; transform: scale(0); animation: cubein 16s linear infinite } @keyframes cubein { 0%, 53.5% { transform: scale(0) } 55% { transform: scale(1.1) } 56%, 97% { transform: scale(1) } 100% { transform: scale(0) } }
.fs .atmo { stroke: rgba(226, 193, 134, .18); stroke-width: 6 } .fs .earth { fill: #122038; stroke-width: 2.6 } .fs .land { fill: rgba(201, 164, 92, .35); stroke: none; animation: turn 26s linear infinite } @keyframes turn { from { transform: translateX(0) } to { transform: translateX(-170px) } }
.fs .dish { fill: #16202f } .fs .dish-pole, .fs .dish-f { stroke-width: 3 }
.fs .pulse { fill: none; stroke: rgba(226, 193, 134, .6); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-out infinite; animation-delay: var(--d) } @keyframes pulse { 0% { opacity: .9; transform: scale(.4) } 100% { opacity: 0; transform: scale(5) } }
.fs .orbit { stroke-dasharray: 3 7; opacity: .4 }

.fs .sat-b { fill: #16202f } .fs .sat-p { fill: rgba(201, 164, 92, .3) } .fs .sat-l { fill: var(--gold-ink); stroke: none; animation: lit .8s steps(2) infinite }
.fs .beam { stroke-dasharray: 4 4; stroke-width: 2.4; opacity: 0; filter: drop-shadow(0 0 5px rgba(226, 193, 134, .9)) } .fs .beam.up { animation: beamup 16s linear infinite } .fs .beam.down { animation: beamdown 16s linear infinite }
@keyframes beamup { 0%, 57% { opacity: 0; stroke-dashoffset: 0 } 58%, 62.5% { opacity: 1 } 63%, 100% { opacity: 0; stroke-dashoffset: -80 } }
@keyframes beamdown { 0%, 62.5% { opacity: 0; stroke-dashoffset: 0 } 63.5%, 68.5% { opacity: 1 } 69%, 100% { opacity: 0; stroke-dashoffset: -80 } }
.fs .burst { fill: var(--gold-ink); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: burst 16s linear infinite } @keyframes burst { 0%, 61.5% { opacity: 0; transform: scale(.3) } 62% { opacity: .9 } 64%, 100% { opacity: 0; transform: scale(4) } }
.fs .screen { fill: #0d1626; stroke-width: 2.6 } .fs .screen-s { stroke-width: 3 }
.fs .page rect, .fs .page circle { stroke: none } .fs .pg-head { fill: #1a2740 } .fs .pg-dot, .fs .pg-nav, .fs .pg-cta { fill: var(--gold-ink) } .fs .pg-hero { fill: #22304b } .fs .pg-t { fill: #e8e3d6 } .fs .pg-t2 { fill: #9aa4b5 } .fs .pg-card { fill: #1f2d47; stroke: rgba(226, 193, 134, .35); stroke-width: 1 }
.fs .shimmer { fill: rgba(226, 193, 134, .08); animation: shimmer 4s linear infinite } @keyframes shimmer { from { transform: translateX(-80px) } to { transform: translateX(260px) } }
.fs .page { animation: pagelit 16s linear infinite } @keyframes pagelit { 0%, 68% { opacity: .55 } 70%, 100% { opacity: 1 } }
.fs .cursor { fill: var(--gold-ink); stroke: none; animation: cursor 5s ease-in-out infinite } @keyframes cursor { 0%, 100% { transform: translate(0, 0) } 30% { transform: translate(-40px, -22px) } 42% { transform: translate(-40px, -22px) scale(.8) } 55% { transform: translate(-40px, -22px) } 80% { transform: translate(10px, 6px) } }
.fs .arrive { animation: arrive 16s linear infinite } @keyframes arrive { 0%, 71% { transform: translateX(190px); opacity: 0 } 72% { opacity: 1 } 82%, 96% { transform: translateX(0); opacity: 1 } 97.5%, 100% { transform: translateX(190px); opacity: 0 } }
.fs .arr .legA { animation: aLegA 16s linear infinite } .fs .arr .legB { animation: aLegB 16s linear infinite } .fs .arr .armA { animation: aArmA 16s linear infinite } .fs .arr .armB { animation: aArmB 16s linear infinite }
.fs .spot { fill: url(#fs-spotf); stroke: none; opacity: 0 } .fs .spot-hi { fill: url(#fs-spotg); stroke: none; opacity: 0 } .fs .sp1 { animation: sp1 16s linear infinite } .fs .sp2 { animation: sp2 16s linear infinite } .fs .sp3 { animation: sp3 16s linear infinite } .fs .sp4 { animation: sp4 16s linear infinite } .fs .sp5 { animation: sp5 16s linear infinite }
.fs .lb1 { animation: lb1 16s linear infinite } .fs .lb2 { animation: lb2 16s linear infinite } .fs .lb3 { animation: lb3 16s linear infinite } .fs .lb4 { animation: lb4 16s linear infinite } .fs .lb5 { animation: lb5 16s linear infinite }
.fs .look .body { animation: breathe 2.8s ease-in-out infinite; transform-origin: 0 -80px } .fs .look2 .body { animation-delay: 1.1s }
.fs .react { fill: var(--gold-ink); stroke: none; opacity: 0; animation: react 3.6s ease-out infinite; animation-delay: var(--d) } .fs .react-cart { fill: none; stroke: var(--gold-ink); stroke-width: 2 } .fs .react-chat { fill: #e8e3d6 }
@keyframes react { 0% { opacity: 0; transform: translate(var(--x), 70px) scale(.5) } 12% { opacity: 1; transform: translate(var(--x), 40px) scale(1.1) } 60% { opacity: .8; transform: translate(calc(var(--x) * 1.3), -10px) scale(1) } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.5), -50px) scale(.9) } }
.fs .reacts { animation: reactburst 16s linear infinite } @keyframes reactburst { 0%, 69% { opacity: .45 } 70%, 86% { opacity: 1 } 88%, 100% { opacity: .45 } }
.fs .st { animation: 16s linear infinite } .fs .s1 { animation-name: st1 } .fs .s2 { animation-name: st2 } .fs .s3 { animation-name: st3 } .fs .s4 { animation-name: st4 } .fs .s5 { animation-name: st5 }
@keyframes st1 { 0%, 19% { opacity: 1 } 24%, 100% { opacity: .5 } } @keyframes st2 { 0%, 15% { opacity: .5 } 19%, 37% { opacity: 1 } 42%, 100% { opacity: .5 } } @keyframes st3 { 0%, 33% { opacity: .5 } 37%, 56% { opacity: 1 } 60%, 100% { opacity: .5 } } @keyframes st4 { 0%, 53% { opacity: .5 } 57%, 69% { opacity: 1 } 73%, 100% { opacity: .5 } } @keyframes st5 { 0%, 66% { opacity: .5 } 70%, 100% { opacity: 1 } }
.fs * { animation-play-state: paused } .flow.on .fs * { animation-play-state: running }
/* final state for stills */
.flow.still .fs * { animation: none } .flow.still .fs .typ path { stroke-dashoffset: 0 } .flow.still .fs .cube-in { transform: none } .flow.still .fs .bar-fill { transform: none } .flow.still .fs .build { opacity: 1 } .flow.still .fs .page { opacity: 1 } .flow.still .fs .beam { opacity: .6 } .flow.still .fs .arrive { opacity: 1; transform: none } .flow.still .fs .wrench { opacity: 1 } .flow.still .fs .courier { transform: translateX(118px) } .flow.still .fs .spot, .flow.still .fs .spot-hi { opacity: .6 } .flow.still .fs .react { opacity: 1; transform: translate(var(--x), 20px) }

/* seo scene: 12 s. 0-30 the quiet line, 30 the SEO point, 30-55 the climb and the rocket, 55 the ceiling cracks and
   shatters, 55-72 the rocket leaves through the top of the page, 58-95 notes around the climb. */
.seo { padding: 14vh 0 12vh; border-top: 1px solid var(--line); overflow-x: clip }   /* the rocket may leave through the top, a note may not widen the page */
.seo-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center }
.seo-copy .cta { margin-top: 26px }
.seo-price { margin-top: 28px; padding: 16px 18px; border: 1px solid rgba(201, 164, 92, .4); background: rgba(16, 29, 51, .6); max-width: 46ch } .seo-price p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5 } .seo-price p:first-child { margin-bottom: 6px; font-size: 15px } .seo-price b { color: var(--ink); font-weight: 600; margin-right: 10px }
.seo-label { margin: 8px 0 0; color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: right }
.seo-chart { position: relative }
.seo-grid { animation: shake 12s linear infinite paused }
@keyframes shake { 0%, 55% { transform: translate(0, 0) } 55.4% { transform: translate(-6px, 4px) } 55.8% { transform: translate(6px, -4px) } 56.2% { transform: translate(-4px, 2px) } 56.6% { transform: translate(3px, -2px) } 57%, 100% { transform: translate(0, 0) } }
.seo-svg { width: 100%; height: auto; display: block; overflow: visible; font: 400 13px var(--mono) }
.seo-probe { visibility: hidden }
.seo-grid-lines { stroke: rgba(232, 227, 214, .08); stroke-width: 1; fill: none } .seo-axes { fill: none; stroke: rgba(232, 227, 214, .3); stroke-width: 1.2 }
.ceil { fill: none; stroke: rgba(232, 227, 214, .3); stroke-width: 1.2 } .ceil-mid { animation: ceil 12s linear infinite paused } @keyframes ceil { 0%, 54.9% { opacity: 1 } 55%, 100% { opacity: 0 } }
.seo-ax { fill: var(--faint); font-size: 21px }
.seo-line { fill: none; stroke: var(--gold-ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(226, 193, 134, .45)) }   /* drawn by the runner */
.seo-mark path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 3 5 } .seo-mark circle { fill: var(--gold-ink); stroke: none } .seo-mark text { fill: var(--gold-ink); font-weight: 600; font-size: 26px }
.seo-mark { opacity: 0; transition: opacity .4s }
.seo-rocket { opacity: 0; filter: drop-shadow(0 0 8px rgba(226, 193, 134, .55)) }   /* moved by the runner, beside the line */
.seo-body { fill: #e8e3d6; stroke: var(--gold); stroke-width: 1.4 } .seo-fin { fill: var(--gold); stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round } .seo-win { fill: var(--bg); stroke: var(--gold); stroke-width: 1.2 } .seo-stripe { stroke: var(--gold); stroke-width: 1.4 }
.seo-flame { fill: var(--gold-ink); stroke: none; transform-origin: -20px 0; animation: flame .16s ease-in-out infinite alternate paused } .seo-flame2 { fill: #fff3d6; animation-duration: .11s }
@keyframes flame { from { transform: scaleX(.6) } to { transform: scaleX(1.35) } }
.smoke { fill: rgba(232, 227, 214, .5); stroke: none; opacity: 0 }
.flash { fill: #fff3d6; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: flash 12s linear infinite paused }
@keyframes flash { 0%, 54.8% { opacity: 0; transform: scale(.2) } 55% { opacity: 1; transform: scale(1) } 60%, 100% { opacity: 0; transform: scale(16) } }
.crack { fill: none; stroke: #e8e3d6; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; animation: crack 12s linear infinite paused }
@keyframes crack { 0%, 54.9% { stroke-dashoffset: 100; opacity: 0 } 55% { opacity: 1 } 59.5% { stroke-dashoffset: 0 } 94% { opacity: 1; stroke-dashoffset: 0 } 100% { opacity: 0; stroke-dashoffset: 0 } }
.shard { fill: rgba(232, 227, 214, .55); stroke: none; opacity: 0; animation: shard 12s cubic-bezier(.2, .6, .4, 1) infinite paused }
@keyframes shard { 0%, 54.9% { opacity: 0; transform: none } 55% { opacity: 1; transform: none } 70%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) } }
.seo-notes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none }
.seo-notes li { position: absolute; display: grid; gap: 1px; padding: 8px 12px; background: rgba(16, 29, 51, .92); border: 1px solid rgba(201, 164, 92, .4); font-size: 13px; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateY(12px); animation: note 12s ease-out infinite paused; animation-delay: calc(3.6s + var(--i) * var(--stag, .8s)); box-shadow: 0 8px 24px rgba(0, 0, 0, .35) }
.seo-notes b { font-weight: 600 } .seo-notes span { color: var(--muted) } .seo-notes span::after { content: ' →' } .seo-notes em { font-style: normal; color: var(--gold-ink); font-size: 12px; letter-spacing: .12em }
@keyframes note { 0% { opacity: 0; transform: translateY(12px) } 4% { opacity: 1; transform: translateY(0) } 18% { opacity: 1; transform: translateY(-4px) } 25%, 100% { opacity: 0; transform: translateY(-22px) } }
.seo.on .seo-grid, .seo.on .seo-svg *, .seo.on .seo-notes li { animation-play-state: running }
.seo.still .seo-grid, .seo.still .seo-svg *, .seo.still .seo-notes li { animation: none } .seo.still .seo-line { stroke-dashoffset: 0 } .seo.still .seo-mark { opacity: 1 } .seo.still .seo-rocket, .seo.still .smoke { opacity: 0 } .seo.still .crack { opacity: 1; stroke-dashoffset: 0 } .seo.still .ceil-mid { opacity: 0 } .seo.still .seo-notes li { opacity: 1; transform: none }

/* contact */
.contact { padding: 18vh 0 16vh; scroll-margin-top: 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(11, 20, 36, .92) 0%, rgba(11, 20, 36, .72) 45%, rgba(11, 20, 36, .95) 100%), url(../media/plates/p5-1920.jpg) center / cover no-repeat }
@supports (background-image: url(x.avif)) { .contact { background-image: linear-gradient(180deg, rgba(11, 20, 36, .92) 0%, rgba(11, 20, 36, .72) 45%, rgba(11, 20, 36, .95) 100%), url(../media/plates/p5-1920.avif) } }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start }
.contact p { color: var(--muted); max-width: 42ch; margin: 18px 0 22px }
.mail { font-weight: 600; font-size: clamp(20px, 2vw, 26px); border-bottom: 1px solid var(--gold-ink) }
.form { display: grid; gap: 16px }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted) } .form .hint { color: var(--faint); font-size: 12px }
.form textarea::placeholder, .form input::placeholder { color: #6f7d93 }
.form input, .form textarea { font: inherit; color: var(--ink); background: #101826; border: 1px solid #6f7d93; border-radius: 0; padding: 12px 14px; width: 100% }
.form input:focus, .form textarea:focus { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold-ink) }
.form ::placeholder { color: #8a97ab }
.form-err { margin: 0; min-height: 1.2em; font-size: 14px; color: #e0706c }
.form-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap } .form-note { font-size: 13px; color: var(--faint); max-width: 34ch }
.form-ok { margin: 0; font-size: 15px; color: var(--gold-ink) } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.firm { margin: 10px 0 0; color: #d3d9e2; font-size: 15px } .price { margin: 14px 0 0; color: #c9d1dc; font-size: 15px; max-width: 46ch }

.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 14px; color: var(--muted) }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap } .foot a { color: var(--ink) }

/* intro overlay: the N emblem, the ring, the star that travels it, the shine, the opening */
.intro-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 10%, var(--bg2) 0%, var(--bg) 60%); overflow: hidden }
html:not(.intro) .intro-overlay { display: none }
.intro-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-svg { position: relative; width: min(470px, 74vw); height: auto; overflow: visible; transform-origin: center }
.intro-ring { fill: none; stroke: rgba(201, 164, 92, .3); stroke-width: 1.2 }
.intro-trail { fill: none; stroke: var(--gold-ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 1; opacity: .95; filter: drop-shadow(0 0 4px rgba(201, 164, 92, .8)) }
.intro-mark { fill: none; stroke: var(--gold); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s .05s cubic-bezier(.65, 0, .35, 1) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
.intro-star { fill: #fff3d6; filter: drop-shadow(0 0 8px rgba(226, 193, 134, 1)) }
.intro-glow { opacity: 0; transform-origin: center }
.intro-beam { position: absolute; top: -20vh; bottom: -20vh; left: -40vw; width: 32vw; background: linear-gradient(90deg, rgba(226, 193, 134, 0) 0%, rgba(226, 193, 134, .35) 50%, rgba(226, 193, 134, 0) 100%); transform: skewX(-14deg); opacity: 0; pointer-events: none }
.intro-overlay.open { transition: opacity .7s var(--ease) .15s; opacity: 0 }
.intro-pct { position: absolute; left: 0; right: 0; top: calc(50% + min(470px, 74vw) / 2 + 10px); text-align: center; font: 500 13px/1 var(--mono, var(--sans)); letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; transition: opacity .3s } .intro-overlay.open .intro-pct { opacity: 0 }

@media (max-width: 1100px) { .works-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 767px) {
  .ov::before { background: linear-gradient(0deg, rgba(6, 11, 24, .88) 0%, rgba(6, 11, 24, .55) 40%, rgba(6, 11, 24, 0) 70%) }
  .head { height: 60px } .pill { padding: 9px 14px; gap: 10px; font-size: 14px } .pill i { width: 16px } .brand span { display: none }
  .ov-hero { padding-bottom: 12vh } .ov-hero h1 { font-size: clamp(36px, 9.6vw, 40px) }
  .ov-services { align-content: start; padding-top: 11vh } .services { grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px } .services dt { font-size: 14px; margin-bottom: 2px } .services dd { font-size: 12.5px; line-height: 1.45 } .ov-services h2 { font-size: 28px }
  .steps li { grid-template-columns: 1fr; gap: 4px }
  .contact-grid { grid-template-columns: 1fr; gap: 40px }
  .works-grid { grid-template-columns: 1fr; gap: 22px }
  .flow-scene { margin-top: 28px } .fs { width: 1400px; max-width: none; animation: pan 16s linear infinite paused } .flow.on .fs { animation-play-state: running } .flow.still .fs { width: 100%; animation: none }
  @keyframes pan { 0%, 17% { transform: translateX(0) } 21%, 35% { transform: translateX(var(--p2, 0px)) } 39%, 53% { transform: translateX(var(--p3, 0px)) } 57%, 67% { transform: translateX(var(--p4, 0px)) } 71%, 100% { transform: translateX(var(--p5, 0px)) } }
  .seo-grid { grid-template-columns: 1fr; gap: 36px } .seo-notes li { font-size: 11px; padding: 6px 9px; --stag: 1s; white-space: normal; max-width: 46% } .seo-notes li:nth-child(even) { left: auto !important; right: 2% } .seo-notes li:nth-child(n+6) { display: none }   /* a phone chart has room for one note at a time */
}
@media (prefers-reduced-motion: reduce) { .ov, .ov-hero h1, .ov-hero p, .ov-hero .cta, .head { transition: none } }

/* sub pages: work detail and legal */
body.sub { padding-top: 68px }
.back { display: inline-block; font-size: 14px; color: var(--muted); margin-bottom: 22px; border-bottom: 1px solid rgba(232, 227, 214, .25) } .back::before { content: '‹ ' }
.work-hero { padding: 8vh 0 0 }
.work-hero h1 { font-size: clamp(36px, 4.4vw, 64px); max-width: 16ch }
.work-meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 32px; color: var(--muted); font-size: 15px } .work-meta span:empty { display: none }
.work-media { width: min(1400px, 100% - 2 * clamp(20px, 5vw, 72px)); margin: 0 auto }
.work-media video, .work-media img { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: #0d1626 }
.work-body { padding: 8vh 0 4vh }
.work-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start }
.work-summary { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: #d3d9e2; max-width: 40ch; margin: 0 0 26px }
.work-done { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; color: #c9d1dc; font-size: 16px }
.work-done li { padding-left: 22px; position: relative } .work-done li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold-ink) }
.work-stills { padding: 4vh 0 8vh } .stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.stills img { width: 100%; height: auto; display: block; border: 1px solid var(--line); aspect-ratio: 1.58; object-fit: cover }
.work-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 0 12vh }
.work-nav a { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 20px } .work-nav a small { font-weight: 400; font-size: 13px; color: var(--muted) }
.work-nav a:last-child { text-align: right } .work-nav a:hover span { color: var(--gold-ink) }
.legal { padding: 8vh 0 12vh } .legal .wrap { max-width: 760px }
.legal h1 { font-size: clamp(36px, 4.4vw, 56px); max-width: 18ch } .legal-date { color: var(--muted); font-size: 14px; margin: 14px 0 40px }
.legal h2 { font-size: 22px; margin: 40px 0 10px } .legal p { color: #d3d9e2; font-size: 16px; line-height: 1.65; margin: 0 0 14px; max-width: 70ch }
.foot-links { display: flex; gap: 22px }
.form label.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted) } .consent input { margin-top: 4px; accent-color: var(--gold) } .consent a { color: var(--ink); border-bottom: 1px solid rgba(232, 227, 214, .3) }
@media (max-width: 767px) { .work-grid { grid-template-columns: 1fr; gap: 28px } .stills { grid-template-columns: 1fr } .work-nav { grid-template-columns: 1fr } .work-nav a:last-child { text-align: left } body.sub { padding-top: 60px } }