:root { --polar:#02111F; --midnight:#06263B; --glacier:#0B3D5A; --arctic:#2F91B7; --aqua:#79DDEB; --frost:#D7F6FF; --snow:#F8FDFF; --muted:#9bbdcc; --line:rgba(121,221,235,.2); --card:rgba(3,24,40,.78); --shell:1320px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--frost); background:var(--polar); font-family:Inter,"IBM Plex Sans Arabic",sans-serif; font-weight:400; line-height:1.55; }
body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.028; background:url('/assets/decorations/frost-noise.png') repeat; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:0; line-height:1.1; } h1 { margin-bottom:1rem; font-size:clamp(3.75rem,5vw,4.5rem); font-weight:700; } h1 span { color:var(--aqua); } h2 { margin-bottom:.8rem; font-size:clamp(2rem,3vw,2.8rem); font-weight:650; } h3 { margin-bottom:.45rem; font-size:1.1rem; font-weight:600; }
.shell { width:min(calc(100% - 96px),var(--shell)); margin:0 auto; } .section { position:relative; padding:110px 0; } .eyebrow { margin-bottom:.65rem; color:var(--aqua); font-size:.69rem; font-weight:600; letter-spacing:.1em; line-height:1.35; text-transform:uppercase; } .icon { width:1rem; height:1rem; object-fit:contain; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.68rem 1rem; border:1px solid var(--aqua); border-radius:4px; background:var(--aqua); color:var(--polar); font-size:.84rem; font-weight:600; transition:background .2s ease,transform .2s ease; } .button:hover { background:var(--snow); transform:translateY(-1px); } .button .icon { width:1rem; height:1rem; } .button-quiet { background:rgba(2,17,31,.18); color:var(--snow); border-color:rgba(215,246,255,.35); } .button-quiet:hover { color:var(--polar); background:var(--snow); } .button-small { min-height:36px; padding:.48rem .78rem; font-size:.76rem; } .text-link { display:inline-flex; align-items:center; gap:.45rem; color:var(--aqua); font-size:.82rem; font-weight:600; } .text-link:hover { color:var(--snow); }

.site-header { position:absolute; inset:0 0 auto; z-index:10; border-bottom:1px solid rgba(215,246,255,.12); background:linear-gradient(180deg,rgba(2,17,31,.58),transparent); } .nav-shell { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand-lockup { width:164px; height:34px; object-fit:contain; object-position:left center; } .brand-mark { display:none; width:32px; height:32px; } .site-nav { display:flex; align-items:center; gap:1.55rem; color:var(--frost); font-size:.8rem; } .site-nav > a:not(.button) { opacity:.82; } .site-nav > a:not(.button):hover { color:var(--aqua); opacity:1; } .nav-toggle { display:none; border:0; padding:.35rem; background:transparent; cursor:pointer; } .nav-toggle .icon { width:23px; height:23px; }

.hero { min-height:800px; display:flex; align-items:flex-end; position:relative; overflow:hidden; isolation:isolate; padding:150px 0 0; background:#031622 url('/assets/backgrounds/hero-iceberg-desktop-clean.png') center / cover no-repeat; } .hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(2,17,31,.1),rgba(2,17,31,0) 60%),linear-gradient(0deg,rgba(2,17,31,.55),transparent 42%); } .hero-content { width:min(calc(100% - 96px),var(--shell)); position:relative; z-index:1; } .hero-copy { max-width:590px; padding-bottom:56px; } .hero-copy .eyebrow { display:inline-block; padding:.42rem .65rem; border:1px solid rgba(121,221,235,.2); border-radius:3px; background:rgba(6,38,59,.48); } .hero-intro { max-width:530px; margin-bottom:1.55rem; color:var(--frost); font-size:1rem; } .hero-actions,.contact-actions,.project-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.info-strip { border:1px solid rgba(121,221,235,.18); border-bottom:0; border-radius:8px 8px 0 0; background:rgba(2,17,31,.68); backdrop-filter:blur(12px); } .info-grid { height:86px; display:grid; grid-template-columns:repeat(4,1fr); } .info-item { min-width:0; display:flex; align-items:center; gap:.7rem; padding:.85rem 1.25rem; border-right:1px solid rgba(121,221,235,.14); } .info-item:last-child { border-right:0; } .info-item > .icon { width:1.1rem; height:1.1rem; flex:0 0 auto; } .info-item span { display:block; color:var(--muted); font-size:.67rem; } .info-item strong,.info-item a { display:block; overflow-wrap:anywhere; color:var(--snow); font-size:.78rem; font-weight:500; } .info-item a:hover { color:var(--aqua); }

.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; }
.tag-list { display:flex; flex-wrap:wrap; gap:.32rem; } .tag-list span { padding:.22rem .42rem; border:1px solid rgba(121,221,235,.18); border-radius:3px; background:rgba(121,221,235,.05); color:var(--frost); font-size:.66rem; }
.work-showcase { --work-index:0; min-height:770px; position:relative; overflow:hidden; isolation:isolate; display:flex; padding:66px 0 58px; background:#020f1b; outline-offset:-4px; touch-action:pan-y; } .work-showcase:focus-visible { outline:1px solid var(--aqua); } .work-showcase__scene,.work-showcase__scene > div { position:absolute; inset:0; } .work-showcase__scene { z-index:-1; overflow:hidden; } .work-showcase__scene::after { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 44% 58% at 59% 54%,rgba(2,17,31,.72),rgba(2,17,31,.48) 58%,rgba(2,17,31,.12) 100%); pointer-events:none; } .work-showcase__backdrop { background:#031622 url('/assets/work-slider/backgrounds/02-work-slider-left-content-4k.png') center / cover no-repeat; transition:opacity .72s cubic-bezier(.22,1,.36,1); } .work-showcase__parallax { opacity:.045; background:url('/assets/work-slider/backgrounds/05-work-slider-parallax-zoom-4k.png') center / cover no-repeat; animation:workKenBurns 28s ease-in-out infinite alternate; } .work-showcase__haze { opacity:.12; background:url('/assets/work-slider/overlays/03-cold-light-haze-4k.png') 67% 56% / cover no-repeat; } .work-showcase__particles { opacity:.05; background:url('/assets/work-slider/overlays/04-frost-particles-4k.png') center / cover no-repeat; } .work-showcase__vignette { z-index:1; background:url('/assets/work-slider/overlays/02-cinematic-vignette-4k.png') center / cover no-repeat,linear-gradient(90deg,rgba(2,17,31,.64),rgba(2,17,31,.24) 62%,rgba(2,17,31,.58)); } .work-showcase__transition { z-index:2; opacity:0; background:url('/assets/work-slider/backgrounds/04-work-slider-transition-blur-4k.png') center / cover no-repeat; transition:opacity .32s ease; } .work-showcase.is-transitioning .work-showcase__transition { opacity:.68; }
.work-showcase__shell { width:min(calc(100% - 96px),var(--shell)); position:relative; display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:2rem; } .work-showcase__layout { min-height:570px; display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; padding:18px 72px 0; } .work-showcase__panel { width:clamp(430px,34vw,480px); max-width:35%; position:relative; align-self:center; overflow:hidden; padding:42px 44px; border:1px solid rgba(215,246,255,.25); border-radius:20px; background:rgba(2,17,31,.5); box-shadow:0 18px 52px rgba(0,0,0,.16); backdrop-filter:blur(8px); } .work-showcase__panel-frost { position:absolute; inset:0; opacity:.12; background:url('/assets/work-slider/overlays/01-frosted-content-overlay-4k.png') center / cover no-repeat; pointer-events:none; } .work-showcase__content { position:relative; transition:opacity .3s ease,transform .3s ease; } .work-showcase.is-transitioning .work-showcase__content { opacity:0; transform:translateY(8px); } .work-showcase__content .eyebrow { margin:0 0 .5rem; } .work-showcase__meta { display:flex; align-items:center; gap:.38rem; margin:0 0 .7rem; color:var(--muted); font-size:.78rem; font-weight:600; letter-spacing:.1em; } .work-showcase__meta span:first-child { color:var(--aqua); } .work-showcase__type { margin:0 0 .75rem; color:var(--frost); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .work-showcase h3 { max-width:420px; margin-bottom:.95rem; font-family:"IBM Plex Sans Arabic",Inter,sans-serif; font-size:clamp(2rem,3vw,2.85rem); font-weight:700; } .work-showcase__summary { max-width:420px; margin-bottom:1.25rem; color:var(--frost); font-size:.91rem; } .work-showcase__tags { margin-bottom:1.55rem; } .work-showcase__actions { display:flex; flex-wrap:wrap; gap:.65rem; } .laptop { width:clamp(650px,55vw,760px); flex:0 1 760px; align-self:flex-end; position:relative; aspect-ratio:1.56; margin:0 1.5% 0 0; filter:drop-shadow(0 28px 26px rgba(0,0,0,.42)); } .laptop::before { content:""; position:absolute; z-index:-1; right:9%; bottom:14%; width:72%; height:48%; border-radius:50%; background:radial-gradient(ellipse,rgba(121,221,235,.12),transparent 68%); filter:blur(24px); } .laptop__lid { position:absolute; inset:0 0 31px; overflow:hidden; padding:14px 13px 18px; border:1px solid rgba(215,246,255,.38); border-radius:14px 14px 8px 8px; background:linear-gradient(145deg,#132a3b,#050d15 45%,#0a1824); box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 26px rgba(0,0,0,.42); } .laptop-screen { width:100%; height:100%; overflow:hidden; border:1px solid rgba(121,221,235,.18); border-radius:7px 7px 4px 4px; background:#061826; } .laptop-screen img { width:100%; height:100%; object-fit:cover; object-position:center; } .laptop__camera { width:42px; height:4px; position:absolute; top:6px; left:50%; border-radius:999px; background:#03090e; transform:translateX(-50%); } .laptop__base { height:31px; position:absolute; right:-5%; bottom:0; left:-5%; border:1px solid rgba(215,246,255,.23); border-radius:4px 4px 22px 22px; background:linear-gradient(180deg,#344d5f,#0b1823 38%,#050c13); box-shadow:0 13px 22px rgba(0,0,0,.42); } .laptop__base::after { content:""; width:22%; height:5px; position:absolute; top:4px; left:39%; border-radius:0 0 7px 7px; background:#02070b; }
.work-showcase__bottom { width:88%; margin:0 auto; } .work-progress { height:22px; position:relative; } .work-progress::before { content:""; position:absolute; right:2px; bottom:9px; left:2px; height:1px; background:rgba(121,221,235,.42); box-shadow:0 0 8px rgba(121,221,235,.2); } .work-progress__rail { position:absolute; inset:4px 0; opacity:1; background:url('/assets/work-slider/progress/01-ice-progress-rail-3840x180.png') center / 100% 100% no-repeat; filter:drop-shadow(0 0 4px rgba(121,221,235,.25)); } .work-progress__active { width:25%; height:22px; position:absolute; top:0; left:0; transform:translateX(calc(var(--work-index) * 100%)); transition:transform .72s cubic-bezier(.22,1,.36,1); } .work-progress__elapsed { position:absolute; inset:3px 0; transform:scaleX(0); transform-origin:left center; background:url('/assets/work-slider/progress/02-ice-progress-active-segment-960x180.png') center / 100% 100% no-repeat; filter:drop-shadow(0 0 5px rgba(121,221,235,.52)); } .work-showcase.is-playing .work-progress__elapsed { animation:workProgress 6s linear forwards; } .work-progress__dot { width:19px; height:19px; position:absolute; top:1px; right:-9px; opacity:1; background:url('/assets/work-slider/progress/03-ice-progress-glow-dot-256.png') center / contain no-repeat; } .work-progress__stop { width:25%; height:38px; position:absolute; top:-8px; z-index:2; padding:0; border:0; background:transparent; cursor:pointer; } .work-progress__stop:nth-of-type(1) { left:0; } .work-progress__stop:nth-of-type(2) { left:25%; } .work-progress__stop:nth-of-type(3) { left:50%; } .work-progress__stop:nth-of-type(4) { left:75%; } .work-progress__stop:focus-visible { outline:1px solid var(--aqua); outline-offset:3px; } .work-showcase__controls { position:absolute; top:50%; right:36px; left:36px; display:flex; justify-content:space-between; pointer-events:none; transform:translateY(-50%); } .work-control { width:52px; height:52px; display:grid; place-items:center; padding:0; border:1px solid rgba(215,246,255,.62); border-radius:50%; background:rgba(2,17,31,.58); box-shadow:0 0 0 1px rgba(121,221,235,.08),0 8px 24px rgba(0,0,0,.2); cursor:pointer; pointer-events:auto; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; } .work-control:hover { border-color:var(--aqua); background:rgba(6,38,59,.82); box-shadow:0 0 18px rgba(121,221,235,.2); } .work-control:focus-visible { outline:2px solid var(--aqua); outline-offset:3px; } .work-control .icon { width:20px; height:20px; } .work-control:not(.work-control--next) .icon { transform:rotate(180deg); } .laptop-screen { position:relative; } .laptop-screen__mark { width:62px; height:62px; position:absolute; top:50%; left:50%; display:grid; place-items:center; border:1px solid rgba(121,221,235,.28); border-radius:50%; background:rgba(2,17,31,.26); box-shadow:0 0 44px rgba(121,221,235,.13); transform:translate(-50%,-50%); } .laptop-screen__mark .icon { width:28px; height:28px; opacity:.9; } .section-glow-line { height:60px; margin-top:-1px; background:#06263B url('/assets/work-slider/transitions/01-ice-section-glow-line-3840x320.png') center / 100% 100% no-repeat; }
.project-visual { aspect-ratio:16/9; min-height:0; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(145deg,rgba(11,61,90,.92),#031622 70%); } .project-visual::before { content:""; position:absolute; inset:0; opacity:.25; background:url('/assets/decorations/ice-arc-lines.svg') center / cover no-repeat; } .project-visual::after { content:""; position:absolute; inset:0; opacity:.16; background:url('/assets/decorations/technical-grid.svg') center / 140px; } .project-placeholder { position:absolute; inset:0; z-index:1; display:grid; place-content:center; justify-items:center; gap:.45rem; color:var(--frost); font-family:"IBM Plex Sans Arabic",Inter,sans-serif; font-size:.9rem; font-weight:600; text-align:center; } .project-placeholder .icon { width:32px; height:32px; } .project-visual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .project-visual.has-project-image::before,.project-visual.has-project-image::after { display:none; }
@keyframes workKenBurns { from { transform:scale(1.01); } to { transform:scale(1.03); } } @keyframes workProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.about-section { background:#06263B; } .about-grid { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:5rem; } .about-copy { max-width:510px; } .about-copy p:not(.eyebrow) { color:var(--muted); } .about-image { min-height:390px; background:linear-gradient(90deg,#06263b00 65%,rgba(2,17,31,.12)),url('/assets/backgrounds/about-iceberg-clean.png') center / cover no-repeat; }
.approach-section { background:#02111f; } .approach-list { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin:0; padding:0; list-style:none; } .approach-list::before { content:""; position:absolute; top:18px; right:7%; left:7%; height:1px; background:linear-gradient(90deg,transparent,var(--arctic),transparent); } .approach-list li { min-width:0; position:relative; z-index:1; padding:0 1rem 0 0; } .approach-list span { width:38px; height:38px; display:grid; place-items:center; margin-bottom:1rem; border:1px solid rgba(121,221,235,.5); border-radius:50%; background:#06263b; color:var(--aqua); font-size:.67rem; font-weight:600; } .approach-list h3 { font-size:1rem; } .approach-list p { max-width:180px; margin:0; color:var(--muted); font-size:.8rem; }
.capabilities-section { overflow:hidden; background:#041d30; } .capabilities-section::before { content:""; position:absolute; inset:0; opacity:.08; background:url('/assets/decorations/technical-grid.svg') center / 250px; pointer-events:none; } .capabilities-section .shell { position:relative; } .capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; } .capability { min-width:0; padding-left:1rem; border-left:1px solid rgba(121,221,235,.28); } .capability-icon { margin-bottom:.85rem; } .capability-icon .icon { width:21px; height:21px; } .capability p { min-height:66px; color:var(--muted); font-size:.82rem; }
.contact-section { min-height:500px; display:flex; align-items:center; position:relative; overflow:hidden; background:#031622 url('/assets/backgrounds/contact-iceberg-clean.png') center / cover no-repeat; } .contact-section::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,17,31,.88) 0%,rgba(2,17,31,.52) 52%,rgba(2,17,31,.05)); } .contact-content { position:relative; } .contact-content > p:not(.eyebrow) { max-width:560px; color:var(--frost); font-size:1rem; }
.site-footer { border-top:1px solid var(--line); background:#020f1b; } .footer-inner { min-height:96px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; } .footer-brand img { width:150px; height:31px; object-fit:contain; object-position:left center; } .footer-inner p { margin:0; color:var(--muted); font-size:.75rem; text-align:center; } .footer-links { display:flex; justify-content:flex-end; gap:.5rem; } .footer-links a { display:grid; width:31px; height:31px; place-items:center; border:1px solid var(--line); border-radius:3px; } .footer-links a:hover { border-color:var(--aqua); }

.project-page { background:var(--polar); } .project-hero { padding:150px 0 80px; background:linear-gradient(180deg,#082a40,#02111f); } .breadcrumb { display:inline-flex; gap:.5rem; margin-bottom:2.5rem; color:var(--muted); font-size:.8rem; } .project-hero-grid { display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:4rem; } .project-summary { max-width:600px; color:var(--frost); } .detail-visual { border:1px solid var(--line); border-radius:6px; } .details-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:7rem; } .detail-main { max-width:720px; } .detail-main section { padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--line); } .detail-main p:not(.eyebrow) { color:var(--muted); } .feature-list { display:grid; gap:.6rem; padding:0; margin:0; list-style:none; } .feature-list li { display:flex; align-items:center; gap:.55rem; } .feature-list .icon { width:.75rem; height:.75rem; } .project-sidebar { align-self:start; padding:1.2rem; border:1px solid var(--line); border-radius:5px; background:#06263b; } .project-sidebar > div + div { margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line); } .project-sidebar p { margin-bottom:.35rem; color:var(--muted); font-size:.75rem; } .project-cta { padding:64px 0; background:#0b3d5a; } .project-cta .shell { display:flex; align-items:center; justify-content:space-between; gap:2rem; } .project-cta h2 { margin:0; font-size:clamp(1.6rem,3vw,2.3rem); } .not-found { min-height:70vh; display:grid; place-items:center; text-align:center; }

@media (max-width:1100px) { .shell,.hero-content { width:min(calc(100% - 64px),var(--shell)); } .capability-grid { grid-template-columns:repeat(2,1fr); } .capability p { min-height:0; } .approach-list { gap:1.2rem; } .about-grid { gap:3rem; } .work-showcase__shell { width:min(calc(100% - 64px),var(--shell)); } .work-showcase__identity { width:210px; } }
@media (max-width:820px) { body.nav-open { overflow:hidden; } .shell,.hero-content { width:min(calc(100% - 40px),var(--shell)); } .site-header { background:rgba(2,17,31,.86); backdrop-filter:blur(10px); } .nav-shell { min-height:64px; } .brand-lockup { display:none; } .brand-mark { display:block; } .nav-toggle { display:block; z-index:2; } .site-nav { display:none; position:fixed; inset:64px 0 0; padding:2rem; flex-direction:column; align-items:stretch; background:var(--polar); font-size:1rem; } .nav-open .site-nav { display:flex; } .hero { min-height:820px; padding-top:116px; align-items:flex-start; background-image:url('/assets/backgrounds/hero-iceberg-mobile-clean.png'); background-position:center bottom; background-size:cover; } .hero::before { background:linear-gradient(180deg,rgba(2,17,31,.25),rgba(2,17,31,.04) 45%,rgba(2,17,31,.14)); } .hero-copy { padding-bottom:0; } h1 { font-size:clamp(2.75rem,8vw,3.8rem); } .info-strip { position:absolute; right:0; bottom:0; left:0; border-right:0; border-left:0; border-radius:0; } .info-grid { height:auto; grid-template-columns:repeat(2,1fr); } .info-item { min-height:72px; padding:.7rem 1rem; border-bottom:1px solid rgba(121,221,235,.14); } .info-item:nth-child(2) { border-right:0; } .info-item:nth-last-child(-n+2) { border-bottom:0; } .about-grid,.project-hero-grid,.details-grid { grid-template-columns:1fr; } .about-image { min-height:330px; background-position:center; } .project-hero-grid { gap:2rem; } .project-sidebar { max-width:470px; } .footer-inner { grid-template-columns:1fr auto; padding:1.25rem 0; } .footer-inner p { grid-column:1 / -1; grid-row:2; text-align:left; } .work-showcase { min-height:820px; padding:88px 0 28px; } .work-showcase__shell { width:min(calc(100% - 40px),var(--shell)); gap:2rem; } .work-showcase__backdrop { background-image:url('/assets/work-slider/mobile/02-work-slider-mobile-text-safe-2160x3840.png'); background-position:center; } .work-showcase[data-work-side="right"] .work-showcase__backdrop { background-image:url('/assets/work-slider/mobile/02-work-slider-mobile-text-safe-2160x3840.png'); } .work-showcase__parallax { display:none; } .work-showcase__vignette { background:url('/assets/work-slider/overlays/02-cinematic-vignette-4k.png') center / cover no-repeat,linear-gradient(180deg,rgba(2,17,31,.42),rgba(2,17,31,.73)); } .work-showcase__layout { min-height:0; flex:1; align-items:flex-end; } .work-showcase__panel { width:100%; padding:32px 28px; } .work-showcase__identity { display:none; } .work-showcase h3 { font-size:clamp(2rem,9vw,2.8rem); } .work-showcase__summary { font-size:.91rem; } .section-glow-line { height:48px; } }
@media (max-width:560px) { .shell,.hero-content { width:min(calc(100% - 40px),var(--shell)); } .section { padding:78px 0; } .hero-actions,.contact-actions { flex-direction:column; } .hero-actions .button,.contact-actions .button { width:100%; } .hero-intro { font-size:.94rem; } .info-grid,.capability-grid { grid-template-columns:1fr; } .info-item,.info-item:nth-child(2) { border-right:0; } .info-item:nth-child(3) { border-bottom:1px solid rgba(121,221,235,.14); } .about-image { min-height:270px; order:-1; } .approach-list { display:grid; grid-template-columns:1fr; gap:1.1rem; } .approach-list::before { top:20px; bottom:20px; right:auto; left:18px; width:1px; height:auto; background:linear-gradient(var(--arctic),transparent); } .approach-list li { display:flex; align-items:flex-start; gap:.85rem; padding:0; } .approach-list span { flex:0 0 auto; margin:0; } .approach-list p { max-width:none; } .capability { padding:0 0 0 1rem; } .contact-section { min-height:470px; } .contact-section::before { background:linear-gradient(90deg,rgba(2,17,31,.9),rgba(2,17,31,.46)); } .footer-inner { grid-template-columns:1fr; } .footer-inner p { grid-column:auto; grid-row:auto; } .footer-links { justify-content:flex-start; } .project-hero { padding:110px 0 64px; } .project-cta .shell { align-items:flex-start; flex-direction:column; } .work-showcase { min-height:800px; } .work-showcase__shell { gap:1.25rem; } .work-showcase__panel { padding:28px 22px; } .work-showcase__content-intro { align-items:flex-start; flex-direction:column; gap:.15rem; } .work-showcase__content .eyebrow { margin-bottom:.35rem; } .work-showcase__tags { margin-bottom:1.4rem; } .work-showcase__actions { flex-direction:column; } .work-showcase__actions .button { width:100%; } .work-showcase__bottom { align-items:flex-end; flex-direction:column; gap:1rem; } .work-progress { width:100%; } .work-showcase__controls { align-self:flex-end; } .section-glow-line { height:38px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .work-showcase__parallax { animation:none; } .work-showcase__transition,.work-showcase__content,.work-progress__active { transition-duration:1ms; } .work-showcase.is-playing .work-progress__elapsed { animation:none; transform:scaleX(1); } }

/* The progress rail shares the showcase timer and stays above decorative scenery. */
.work-showcase__scene,.work-showcase__backdrop,.work-showcase__parallax,.work-showcase__haze,.work-showcase__particles,.work-showcase__vignette,.work-showcase__transition { pointer-events:none; }
.work-progress { height:56px; isolation:isolate; z-index:55; }
.work-progress::before { display:none; }
.work-progress__rail { top:26px; right:0; bottom:auto; left:0; height:4px; border-radius:999px; background:rgba(215,246,255,.20); box-shadow:none; filter:none; }
.work-progress__active { top:26px; right:0; left:0; height:4px; overflow:visible; border-radius:999px; transition:none; }
.work-progress__elapsed { inset:0; border-radius:inherit; background:linear-gradient(90deg,#2f91b7 0%,#79ddeb 58%,#f8fdff 100%); box-shadow:0 0 7px rgba(121,221,235,.68),0 0 18px rgba(47,145,183,.34); filter:none; transform-origin:left center; }
.work-progress__dot { display:none; }
.work-progress__stop { top:6px; width:44px !important; height:44px; z-index:4; display:grid; place-items:center; transform:translateX(-50%); border-radius:50%; pointer-events:auto; touch-action:manipulation; }
.work-progress__marker-core { display:block; width:10px; height:10px; border:1px solid rgba(215,246,255,.50); border-radius:50%; background:#06263b; box-shadow:0 0 0 1px rgba(2,17,31,.35); transition:width .22s ease,height .22s ease,background .22s ease,border .22s ease,box-shadow .22s ease; }
.work-progress__stop[aria-current="true"] .work-progress__marker-core { width:17px; height:17px; border:3px solid #79ddeb; background:#f8fdff; box-shadow:0 0 0 5px rgba(121,221,235,.14),0 0 16px rgba(121,221,235,.70),0 0 30px rgba(47,145,183,.30); }
.work-progress__stop:focus-visible { outline:3px solid rgba(121,221,235,.72); outline-offset:3px; }
.work-progress__counter { position:absolute; top:44px; right:0; z-index:5; color:rgba(215,246,255,.82); font-size:.68rem; font-variant-numeric:tabular-nums; letter-spacing:.08em; pointer-events:none; }
.work-showcase__controls { z-index:50; }
.work-control { width:56px; height:56px; z-index:60; border-color:rgba(248,253,255,.64); background:rgba(2,17,31,.52); backdrop-filter:blur(6px); color:#f8fdff; pointer-events:auto; touch-action:manipulation; }
.work-control__icon { display:block; width:24px; height:24px; }
.work-control:hover { border-color:#f8fdff; background:rgba(6,38,59,.80); box-shadow:0 0 14px rgba(121,221,235,.34),0 10px 34px rgba(0,0,0,.28); }
.work-control:active { transform:scale(.94); }
.work-control:focus-visible { outline:3px solid rgba(121,221,235,.72); outline-offset:4px; }
@media (max-width:820px) { .work-control { width:48px; height:48px; } .work-progress__counter { top:43px; } }
@media (max-width:1100px) { .work-showcase__layout { gap:1.75rem; padding-right:60px; padding-left:60px; } .work-showcase__panel { width:min(43vw,460px); max-width:43%; } .laptop { width:min(52vw,650px); } }
@media (max-width:820px) { .work-showcase { min-height:900px; padding:62px 0 38px; } .work-showcase__shell { gap:1.75rem; } .work-showcase__backdrop { background-image:url('/assets/work-slider/mobile/02-work-slider-mobile-text-safe-2160x3840.png'); background-position:center; } .work-showcase__parallax { display:none; } .work-showcase__vignette { background:url('/assets/work-slider/overlays/02-cinematic-vignette-4k.png') center / cover no-repeat,linear-gradient(180deg,rgba(2,17,31,.58),rgba(2,17,31,.72)); } .work-showcase__scene::after { background:linear-gradient(180deg,rgba(2,17,31,.54),rgba(2,17,31,.24) 32%,rgba(2,17,31,.62)); } .work-showcase__layout { min-height:0; flex:1; align-items:center; flex-direction:column; justify-content:center; gap:1.4rem; padding:0; } .work-showcase__panel { width:100%; max-width:470px; align-self:auto; padding:30px 28px; } .laptop { width:min(100%,490px); max-width:490px; flex:0 0 auto; margin:0 auto; } .work-showcase__bottom { width:100%; margin:0; } .work-showcase__controls { position:static; margin-top:16px; transform:none; } .work-control { width:48px; height:48px; } }
@media (max-width:560px) { .work-showcase { min-height:880px; padding:48px 0 32px; } .work-showcase__shell { gap:1.1rem; } .work-showcase__panel { padding:26px 22px; } .work-showcase__content .eyebrow { margin-bottom:.35rem; } .work-showcase__meta { margin-bottom:.55rem; } .work-showcase__summary { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .work-showcase__tags { margin-bottom:1.25rem; } .work-showcase__actions { flex-direction:column; } .work-showcase__actions .button { width:100%; } .laptop { width:min(100%,390px); } .laptop__lid { padding:10px 9px 14px; border-radius:11px 11px 6px 6px; } .laptop__base { height:24px; } .work-showcase__controls { margin-top:14px; } }
@media (max-width:820px) { .work-showcase__controls { padding:0 10px; } }