/* ========================================================================== UI refresh: SVG icon system, cinema reel, compact socials, premium cards. Loaded last on every page. ========================================================================== */ :root{--card-radius:22px;--ease:cubic-bezier(.7,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ink:#0c0f10;--shadow:0 1px 0 oklch(1 0 0 / .7) inset,0 18px 40px -28px oklch(.2 .02 240 / .45)} [data-theme="dark"]{--shadow:0 1px 0 oklch(1 0 0 / .05) inset,0 18px 40px -28px #000} /* --- Icons: masked SVG, inherits currentColor, never an emoji ---------- */ .ic{--icon:url("./assets/icons/arrow.svg");position:relative;display:inline-block;flex:none;width:1em;height:1em;overflow:hidden;vertical-align:-.14em} .ic::before,.ic::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;transition:transform .5s var(--ease)} .ic::after{transform:translate(-130%,130%)} :is(a,button):is(:hover,:focus-visible) .ic:not(.ic-theme,.ic-close,.ic-left,.ic-right,.ic-back)::before{transform:translate(130%,-130%)} :is(a,button):is(:hover,:focus-visible) .ic:not(.ic-theme,.ic-close,.ic-left,.ic-right,.ic-back)::after{transform:none} .ic-left{--icon:url("./assets/icons/chevron-left.svg")} .ic-right{--icon:url("./assets/icons/chevron-right.svg")} .ic-back{--icon:url("./assets/icons/arrow-left.svg")} .ic-close{--icon:url("./assets/icons/close.svg")} .ic-theme{--icon:url("./assets/icons/theme.svg")} .ic-pause{--icon:url("./assets/icons/pause.svg")} .ic-play{--icon:url("./assets/icons/play.svg")} .ic-left::after,.ic-right::after,.ic-back::after,.ic-close::after,.ic-theme::after,.ic-pause::after,.ic-play::after{display:none} .ic-theme::before{transition:transform .6s var(--ease)} [data-theme="dark"] .ic-theme::before{transform:rotate(180deg)} button:hover .ic-left::before,a:hover .ic-back::before{transform:translateX(-2px)} button:hover .ic-right::before{transform:translateX(2px)} .dialog-close,.viewer-close{display:grid;place-items:center;font-size:18px} .back-home{gap:var(--space-2)} /* --- Header: tighter --------------------------------------------------- */ .home .site-header,.portfolio-page .site-header{height:84px} .site-header nav .gallery-nav .ic,.nav-contact .ic{font-size:.9em} nav .theme{font-size:20px} .signature-logo{width:250px} /* --- Cinema reel --------------------------------------------------------- */ .reel{padding-top:var(--space-1)} .reel-screen{position:relative;height:clamp(196px,15vw,236px);border-radius:var(--card-radius);overflow:hidden;background:var(--ink);color:#f3f5f2;isolation:isolate;box-shadow:0 30px 60px -40px #000a} .reel-strip{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 12%,#000 100%)} .reel-track{--sprocket:20px;position:absolute;inset:0 auto 0 0;display:flex;gap:6px;padding:var(--sprocket) 0;width:max-content;animation:reel-roll calc(var(--frames,8) * 7s) linear infinite;will-change:transform} .reel-track::before,.reel-track::after{content:"";position:absolute;left:0;right:0;height:var(--sprocket);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20'%3E%3Crect x='6' y='6' width='10' height='8' rx='2' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E") repeat-x left center} .reel-track::before{top:0}.reel-track::after{bottom:0} .reel-screen:is(:hover,:focus-within) .reel-track{animation-play-state:paused} @keyframes reel-roll{to{transform:translateX(-50%)}} .reel-frame{position:relative;flex:none;height:100%;aspect-ratio:var(--ratio);border-radius:4px;overflow:hidden;background:#1b1f21} .reel-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.04);transition:filter .5s,transform .8s var(--ease-out)} .reel-frame:hover img{transform:scale(1.04);filter:saturate(1.1) contrast(1.06)} .reel-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -40px 40px -30px #000a;pointer-events:none} .frame-label{position:absolute;left:8px;bottom:6px;z-index:1;font-size:9.5px;letter-spacing:.14em;font-weight:500;color:#ffffffc2;white-space:pre;text-shadow:0 1px 4px #000} .reel-title{position:absolute;z-index:2;inset:0 auto 0 0;width:min(560px,52%);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding:var(--space-6) var(--space-12) var(--space-6) var(--space-8);background:linear-gradient(90deg,var(--ink) 0,var(--ink) 58%,#0c0f10d9 74%,transparent);pointer-events:none} .reel-title h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.1rem + 2.3vw,3.4rem);line-height:1;letter-spacing:-.045em;color:#f6f7f4} .reel-title h1>span{color:#f6f7f480;font-weight:500} .reel-meta,.reel-tags{display:flex;align-items:center;gap:var(--space-2);font-size:10.5px;letter-spacing:.16em;font-weight:500;color:#f3f5f2a8;white-space:nowrap} .reel-sep{opacity:.4} .timecode{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#f3f5f2d9;min-width:11ch} .rec{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px #ff4d3d33;animation:rec 1.6s steps(1) infinite} @keyframes rec{50%{opacity:.25}} .reel-tags i{width:3px;height:3px;border-radius:50%;background:var(--accent)} .reel-grain{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(5) infinite} .reel-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 80px #000b,inset 0 0 0 1px #ffffff12} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(4%,2%)}} @media(prefers-reduced-motion:reduce){.reel-strip{overflow-x:auto;-webkit-mask:none;mask:none}.reel-track{position:relative;height:100%;padding-left:min(560px,52%)}} /* --- Feature banner: Golden orbit ---------------------------------------- */ .feature{padding-bottom:var(--space-3)} .feature-screen{position:relative;aspect-ratio:2.2/1;max-height:640px;width:100%;border-radius:var(--card-radius);overflow:hidden;background:var(--ink) center/cover no-repeat;color:#f3f5f2;isolation:isolate;box-shadow:0 30px 60px -40px #000a} .feature-media{position:absolute;inset:0} .feature-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.04);transition:transform 6s var(--ease-out)} .feature-screen.is-playing .feature-video{transform:none} .feature-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0c0f10e6 0,#0c0f10a6 30%,#0c0f1000 58%),linear-gradient(0deg,#0c0f10b3 0,#0c0f1000 38%)} .feature-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 90px #000a,inset 0 0 0 1px #ffffff12} .feature-frame{position:absolute;inset:22px;z-index:2;pointer-events:none} .feature-frame i{position:absolute;width:26px;height:26px;border:0 solid #ffffff8c} .feature-frame i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px} .feature-frame i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0} .feature-frame i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px} .feature-frame i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0} .feature-copy{position:absolute;z-index:2;left:clamp(32px,4vw,64px);bottom:clamp(32px,4vw,60px);max-width:min(460px,44%);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)} .feature-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.1rem + 2.4vw,3.6rem);line-height:1;letter-spacing:-.045em;color:#f6f7f4;text-shadow:0 2px 30px #0008} .feature-copy h2>span{color:#f6c87a;font-weight:500} .feature-copy p{max-width:36ch;font-size:var(--text-sm);line-height:1.6;color:#f3f5f2b8} .feature-cta{display:inline-flex;align-items:center;gap:var(--space-4);min-height:48px;margin-top:var(--space-1);padding:0 var(--space-3) 0 var(--space-5);border-radius:999px;background:#ffffff1f;border:1px solid #ffffff2e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:var(--text-sm);font-weight:600;color:#fff;transition:background .3s,transform .3s var(--ease-out)} .feature-cta .ic{width:30px;height:30px;padding:8px;border-radius:50%;background:#f6c87a;color:#1b1407;box-sizing:border-box} .feature-cta .ic::before,.feature-cta .ic::after{inset:8px} .feature-cta:hover{background:#ffffff33;transform:translateY(-1px)} .feature-spec{position:absolute;z-index:2;top:clamp(34px,3.4vw,46px);right:clamp(40px,4vw,58px);display:flex;align-items:center;gap:var(--space-2);font-size:10.5px;letter-spacing:.16em;font-weight:500;color:#f3f5f2b3;white-space:nowrap} .feature-spec i{width:3px;height:3px;border-radius:50%;background:#f6c87a} .feature-toggle{position:absolute;z-index:4;right:clamp(34px,3.4vw,46px);bottom:clamp(34px,3.4vw,46px);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0c0f1066;border:1px solid #ffffff38;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:15px;transition:background .3s} .feature-toggle:hover{background:#0c0f10a6} .feature .reel-grain{z-index:2;opacity:.07} @media(prefers-reduced-motion:reduce){.feature-video{transform:none;transition:none}} /* --- Socials: icon + name only ----------------------------------------- */ .home .quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);padding-block:var(--space-3)} .home .quick-links>a,.home .quick-links>button{flex-direction:row;align-items:center;justify-content:center;gap:var(--space-2);min-height:50px;padding:0 var(--space-4);border-radius:14px;font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em;box-shadow:var(--shadow)} .home .quick-links .brand-icon{width:20px;height:20px} /* --- Hub grid ------------------------------------------------------------ */ .hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"person ep epic" "auto ep drone";grid-template-rows:auto auto;gap:var(--space-3);padding-bottom:var(--space-12)} .person-card{grid-area:person}.ep-card{grid-area:ep}.epic-card{grid-area:epic}.auto-card{grid-area:auto}.drone-card{grid-area:drone} .card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--card-radius);background:var(--surface);box-shadow:var(--shadow);padding:var(--space-6);overflow:hidden;isolation:isolate} .card-eyebrow,.photo-chip{font-size:10.5px;letter-spacing:.14em;font-weight:600;color:var(--muted)} .card h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,1.1rem + .8vw,1.9rem);line-height:1.05;letter-spacing:-.035em} .card p{color:var(--muted);font-size:var(--text-sm);line-height:1.55} /* Footer CTA bar shared by every card */ .card-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:54px;margin-top:auto;padding:6px 6px 6px 18px;border-radius:15px;background:color-mix(in oklch,var(--fg) 6%,transparent);color:var(--fg);font-size:var(--text-sm);font-weight:600;letter-spacing:-.005em;text-align:left;transition:background .3s,transform .3s var(--ease-out)} .card-cta:hover{background:color-mix(in oklch,var(--fg) 10%,transparent)} .card-cta:active{transform:scale(.985);opacity:1} .cta-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cta-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:var(--fg);color:var(--bg);font-size:16px;transition:border-radius .4s var(--ease)} .card-cta:hover .cta-icon{border-radius:50%} .card-cta.accent{background:var(--accent);color:#1b2016} .card-cta.accent:hover{background:color-mix(in oklch,var(--accent),white 12%)} .card-cta.accent .cta-icon{background:#1b2016;color:var(--accent)} .card-cta.glass{position:absolute;left:12px;right:12px;bottom:12px;width:auto;z-index:3;background:#0d1113,#0d1113;background:color-mix(in oklch,#0d1113 46%,transparent);color:#fff;border:1px solid #ffffff1f;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)} .card-cta.glass:hover{background:color-mix(in oklch,#0d1113 62%,transparent)} .card-cta.glass .cta-icon{background:#fff;color:#0d1113} /* Person */ .person-card{gap:var(--space-5)} .person-identity{display:flex;align-items:center;gap:var(--space-4)} .avatar{position:relative;flex:none;width:76px;height:76px;padding:3px;border-radius:50%;background:conic-gradient(from 210deg,var(--accent),#00a2b8,#f07025,var(--accent))} .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--surface)} .person-identity h2{font-size:clamp(1.35rem,1.05rem + .7vw,1.75rem)} .person-identity h2>span{color:var(--accent);-webkit-text-stroke:.4px color-mix(in oklch,var(--fg) 30%,transparent)} .person-place{display:block;margin-top:6px;font-size:var(--text-xs);color:var(--muted)} .person-line{font-family:var(--font-display);font-size:clamp(1.25rem,1rem + .6vw,1.6rem)!important;font-weight:500;line-height:1.15!important;letter-spacing:-.03em;color:var(--fg)!important} .person-line span{color:var(--muted)} .person-bio{max-width:34ch;margin-top:calc(var(--space-2) * -1)} /* Epic */ .epic-card{gap:var(--space-2)} .epic-card .epic-mark{display:flex;justify-content:center;align-items:center;height:118px;margin:var(--space-1) 0 var(--space-2)} .epic-card .epic-mark img{width:112px;height:110px;object-fit:contain;filter:drop-shadow(0 12px 14px #0003);transition:transform .8s var(--ease-out)} .epic-card:hover .epic-mark img{transform:translateY(-4px) rotate(-4deg)} .epic-card p{margin-bottom:var(--space-5)} /* Photo cards */ .photo-card{padding:0;background:#15191b;color:#fff} .photo-fill,.carousel-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),opacity .5s ease} .photo-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0008 0,#0000 26%,#0000 52%,#000b 100%)} .ep-card:hover .photo-fill,.carousel-card .carousel-image:hover img{transform:scale(1.03)} .carousel-image{position:absolute;inset:0;display:block;touch-action:pan-y} .carousel-image img.is-entering{opacity:0} .carousel-image img.is-entering.is-in{opacity:1} .photo-chip{position:absolute;z-index:2;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;color:#fff;background:#0d111359;border:1px solid #ffffff24;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none} .photo-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)} .home .carousel-controls{position:absolute;z-index:3;top:12px;right:12px;width:auto;display:flex;align-items:center;gap:4px;padding:3px;border:1px solid #ffffff24;border-radius:999px;background:#0d111359;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff} .home .carousel-controls button{width:34px;height:34px;border:0;border-radius:50%;font-size:15px;display:grid;place-items:center;color:#fff} .home .carousel-controls button:hover{background:#ffffff26;color:#fff} .home .carousel-status{color:#ffffffc9;font-size:10.5px;letter-spacing:.1em;min-width:5ch;text-align:center} /* Elevated Perspective card */ .ep-card{min-height:100%} .ep-card .photo-fill{object-position:50% 40%} .ep-card::before{background:linear-gradient(180deg,#0007 0,#0000 22%,#0000 44%,#000000d9 88%)} .ep-lockup{position:absolute;z-index:2;left:22px;right:22px;bottom:84px;display:flex;flex-direction:column;gap:var(--space-3)} .ep-mark{width:min(78%,300px);height:auto;filter:drop-shadow(0 4px 18px #0009)} .ep-sub{font-size:10.5px;letter-spacing:.14em;font-weight:500;color:#ffffffb3;text-transform:uppercase} /* Desktop proportions */ .person-card,.epic-card{min-height:330px} .auto-card,.drone-card{aspect-ratio:3/2} /* --- Tablet -------------------------------------------------------------- */ @media(max-width:1100px){ .feature-copy p{display:none} .feature-copy{max-width:min(400px,42%)} .hub{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"person epic" "ep auto" "ep drone"} .person-card,.epic-card{min-height:310px} .reel-title{width:min(480px,62%)} } /* --- Mobile -------------------------------------------------------------- */ @media(max-width:700px){ .feature-screen{aspect-ratio:auto;max-height:none} .feature-media{position:relative;inset:auto;aspect-ratio:5/4} .feature-video{object-position:50% 50%} .feature-shade{background:linear-gradient(0deg,var(--ink) 0,#0c0f1000 30%)} .feature-frame{inset:14px} .feature-frame i{width:18px;height:18px} .feature-copy{position:relative;left:auto;bottom:auto;max-width:none;padding:var(--space-2) var(--space-5) var(--space-6);gap:var(--space-3)} .feature-copy h2{font-size:clamp(1.9rem,8.4vw,2.4rem)} .feature-copy p{display:block} .feature-spec{top:24px;right:26px;font-size:9px;gap:6px} .feature-toggle{right:24px;bottom:24px;width:42px;height:42px} .home .site-header,.portfolio-page .site-header{height:68px;min-height:0;flex-wrap:nowrap;padding-block:0} .signature-logo{width:172px;max-height:52px} .brand{min-height:52px} .site-header nav{width:auto;gap:var(--space-1)} .site-header nav>a.gallery-nav,.site-header nav>button:first-child{display:none!important} nav .theme{width:40px;min-height:40px} nav .nav-contact{min-height:40px;padding-inline:var(--space-3);font-size:var(--text-xs);border-radius:999px} .reel-screen{height:auto;display:flex;flex-direction:column} .reel-title{position:relative;width:100%;padding:var(--space-5) var(--space-5) var(--space-2);background:none;gap:var(--space-2)} .reel-title h1{font-size:clamp(1.9rem,8.6vw,2.4rem)} .reel-tags{display:none} .reel-strip{position:relative;height:150px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .reel-track{--sprocket:16px;gap:5px;animation-duration:calc(var(--frames,8) * 5s)} .reel-track::before,.reel-track::after{background-size:18px 16px} .frame-label{display:none} .home .quick-links{gap:var(--space-2);padding-block:var(--space-3)} .home .quick-links>a,.home .quick-links>button{flex-direction:column;gap:5px;min-height:62px;padding:var(--space-2) 2px;font-size:11.5px;border-radius:14px} .hub{grid-template-columns:1fr;grid-template-areas:"person" "ep" "auto" "drone" "epic";gap:var(--space-3)} .card{padding:var(--space-5)} .photo-card{padding:0} .person-card,.epic-card{min-height:0} .person-card{gap:var(--space-4)} .person-line{margin-bottom:var(--space-2)} .ep-card{min-height:0;aspect-ratio:4/5} .ep-lockup{left:18px;right:18px;bottom:80px} .auto-card,.drone-card{aspect-ratio:4/3} .epic-card .epic-mark{height:100px} .epic-card .epic-mark img{width:96px;height:94px} footer{gap:var(--space-3)} } @media(max-width:360px){ .signature-logo{width:150px} .home .quick-links>a,.home .quick-links>button{font-size:10.5px} } /* Gallery tweaks */ .portfolio-statement{width:460px} @media(min-width:1101px){.photo-grid{columns:3}} /* ===== October v2: column hub, photo-led person card, Instagram feed ===== */ .ic-stack{--icon:url("./assets/icons/stack.svg")} .ic-heart{--icon:url("./assets/icons/heart.svg")} .ic-stack::after,.ic-heart::after{display:none} .hub{grid-template-areas:none;grid-template-rows:none;align-items:stretch;padding-bottom:var(--space-8)} .hub-col{display:flex;flex-direction:column;gap:var(--space-3);min-width:0} .person-card,.ep-card,.epic-card,.ig-card,.connect-card{grid-area:auto} .person-card,.epic-card{height:340px;min-height:0} .photo-card.portrait{aspect-ratio:2/3;flex:1 0 auto} .ig-card,.connect-card{flex:1 1 auto;min-height:0} /* Person: photo-led */ .person-card{flex-direction:row;gap:0;padding:0} .person-photo{position:relative;flex:0 0 40%;overflow:hidden;background:#1a1e20} .person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 40%;transition:transform 1.2s var(--ease-out)} .person-card:hover .person-photo img{transform:scale(1.04)} .person-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:var(--space-5)} .person-body h2{margin-top:var(--space-2);font-size:clamp(1.5rem,1.1rem + .8vw,1.95rem)} .person-body h2>span{color:var(--accent);-webkit-text-stroke:.4px color-mix(in oklch,var(--fg) 30%,transparent)} .person-body .person-line{margin-top:var(--space-4);font-size:clamp(1.05rem,.9rem + .35vw,1.25rem)!important} .person-body .card-cta{margin-top:auto} /* Photo cards */ .auto-card .photo-fill{object-position:50% 60%} .drone-card .carousel-image img{object-position:50% 50%} .ep-card .photo-fill{object-position:50% 50%} .ep-card::before{background:linear-gradient(180deg,#0006 0,#0000 20%,#0000 48%,#000000e0 90%)} .ep-lockup{bottom:86px} .ep-mark{width:min(72%,280px)} .auto-card:hover .photo-fill{transform:scale(1.03)} /* Instagram quote card */ .ig-card{gap:var(--space-3);color:var(--fg);background:radial-gradient(120% 90% at 100% 0%,color-mix(in oklch,#f07025 16%,transparent),transparent 60%),radial-gradient(90% 80% at 0% 100%,color-mix(in oklch,#c13584 14%,transparent),transparent 60%),var(--surface)} .ig-card .card-eyebrow{display:flex;align-items:center;gap:8px} .ig-card .brand-icon{width:16px;height:16px} .ig-card blockquote{margin:auto 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,1rem + .7vw,1.7rem);line-height:1.12;letter-spacing:-.035em;text-wrap:balance} .ig-handle{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);font-weight:600;color:var(--muted);margin-bottom:var(--space-3)} .avatar.xs{width:34px;height:34px;padding:2px} .avatar.xs img{border-width:2px} /* Feed */ .feed{padding-bottom:var(--space-16);scroll-margin-top:var(--space-6)} .feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)} .feed-head .card-eyebrow{display:flex;align-items:center;gap:8px} .feed-head h2{margin-top:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.8rem);line-height:1;letter-spacing:-.045em} .feed-follow{width:auto;margin:0;flex:none;background:var(--surface);box-shadow:var(--shadow)} .live-dot{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 0 #ff4d3d66;animation:live 2s ease-out infinite} @keyframes live{0%{box-shadow:0 0 0 0 #ff4d3d66}70%,100%{box-shadow:0 0 0 8px #ff4d3d00}} .feed-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)} .feed-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#15191b;color:#fff;box-shadow:var(--shadow);isolation:isolate;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out) calc(var(--i) * 70ms),transform .7s var(--ease-out) calc(var(--i) * 70ms)} .feed-rail.is-visible .feed-tile{opacity:1;transform:none} .feed-tile img,.feed-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),opacity .4s} .feed-tile video{opacity:0} .feed-tile.is-playing video{opacity:1} .feed-tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0006 0,#0000 30%,#0000 50%,#000c 100%);transition:background .4s} .feed-badge,.feed-date{position:absolute;z-index:2;top:10px;display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:#0d111359;border:1px solid #ffffff24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:10px;font-weight:600;letter-spacing:.12em} .feed-date{left:10px}.feed-badge{right:10px;font-size:11px} .feed-badge:empty{display:none} .feed-info{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px} .feed-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.35;font-weight:500;max-height:0;opacity:0;transition:max-height .5s var(--ease-out),opacity .4s} .feed-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600} .feed-meta .ic-heart{color:#ff5b6e} .feed-open{margin-left:auto;display:inline-flex;align-items:center;gap:5px;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .45s var(--ease-out)} .feed-tile:is(:hover,:focus-visible) img{transform:scale(1.05)} .feed-tile:is(:hover,:focus-visible)::after{background:linear-gradient(180deg,#0006 0,#0000 30%,#0003 45%,#000e 100%)} .feed-tile:is(:hover,:focus-visible) .feed-caption{max-height:3.2em;opacity:1} .feed-tile:is(:hover,:focus-visible) .feed-open{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.feed-tile{opacity:1;transform:none;transition:none}.live-dot{animation:none}} .ep-card{min-height:0} @media(min-width:701px){.epic-card .epic-mark{height:92px;margin:0 0 var(--space-1)}.epic-card .epic-mark img{width:90px;height:88px}.epic-card p{margin-bottom:var(--space-4)}} .skip{top:16px;transform:translateY(-300%)}.skip:focus{transform:none} .ig-card blockquote{font-size:clamp(1.15rem,.95rem + .5vw,1.45rem)} .ig-card .ig-handle{margin-bottom:var(--space-1)} /* Connect card */ .connect-card{gap:var(--space-3);background:var(--accent);color:#1b2016} .connect-card .card-eyebrow{color:#1b2016b3} .connect-card h2{margin-top:auto;font-size:clamp(1.6rem,1.15rem + 1vw,2.2rem)} .connect-card .card-cta{background:#1b201614;color:#1b2016} .connect-card .card-cta:hover{background:#1b201624} .connect-card .card-cta .cta-icon{background:#1b2016;color:var(--accent)} /* Feature widgets: copy removed, one CTA */ .feature{padding-bottom:var(--space-3)} .feature-drone{padding-top:0;padding-bottom:var(--space-8)} .feature-meta{position:absolute;z-index:3;top:clamp(34px,3.4vw,46px);left:clamp(40px,4vw,58px)} .feature-cta{position:absolute;z-index:4;left:clamp(34px,3.4vw,46px);bottom:clamp(34px,3.4vw,46px);margin:0} .feature-shade{background:linear-gradient(0deg,#0c0f10b3 0,#0c0f1000 34%),linear-gradient(180deg,#0c0f1066 0,#0c0f1000 22%)} .feature-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.08);animation:drift 26s ease-in-out infinite alternate} @keyframes drift{0%{transform:scale(1.08) translate(-1.5%,-1%)}100%{transform:scale(1.16) translate(1.5%,1.2%)}} .feature-screen.is-playing .feature-still{opacity:0;transition:opacity .8s} /* Drone HUD flair: teal telemetry over the aerial */ .drone-screen{--hud:#5ee6f0} .drone-screen .feature-cta .ic{background:var(--hud);color:#04181b} .drone-screen .feature-spec i,.drone-screen .reel-meta .rec{background:var(--hud)} .drone-screen .reel-meta .rec{box-shadow:0 0 0 3px #5ee6f033} .drone-screen .feature-frame i{border-color:#5ee6f0b3} .hud{position:absolute;inset:0;z-index:2;pointer-events:none;color:var(--hud)} .hud-grid{position:absolute;inset:0;opacity:.16;background:linear-gradient(#5ee6f0 1px,transparent 1px) 0 0/100% 33.333%,linear-gradient(90deg,#5ee6f0 1px,transparent 1px) 0 0/33.333% 100%;-webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask:radial-gradient(ellipse at center,#000 30%,transparent 75%)} .hud-reticle{position:absolute;left:50%;top:50%;width:92px;height:92px;translate:-50% -50%;border-radius:50%;border:1px solid #5ee6f059;animation:breathe 4s ease-in-out infinite} .hud-reticle::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;translate:-50% -50%;border-radius:50%;background:var(--hud);box-shadow:0 0 12px var(--hud)} .hud-reticle i{position:absolute;background:var(--hud);opacity:.85} .hud-reticle i:nth-child(1),.hud-reticle i:nth-child(2){top:50%;width:22px;height:1.5px;translate:0 -50%} .hud-reticle i:nth-child(1){left:-30px}.hud-reticle i:nth-child(2){right:-30px} .hud-reticle i:nth-child(3),.hud-reticle i:nth-child(4){left:50%;width:1.5px;height:22px;translate:-50% 0} .hud-reticle i:nth-child(3){top:-30px}.hud-reticle i:nth-child(4){bottom:-30px} @keyframes breathe{50%{scale:1.08;border-color:#5ee6f0a6}} .hud-horizon i{position:absolute;left:50%;top:50%;width:min(26%,260px);height:1px;background:linear-gradient(90deg,transparent,#5ee6f0b3)} .hud-horizon i:first-child{translate:calc(-100% - 70px) 0} .hud-horizon i:last-child{translate:70px 0;background:linear-gradient(270deg,transparent,#5ee6f0b3)} .hud-compass{position:absolute;left:50%;top:clamp(30px,3vw,42px);width:min(340px,40%);height:30px;translate:-50% 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)} .hud-tape{position:absolute;left:0;top:0;height:100%;width:200%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='34'%3E%3Cg fill='%235ee6f0' font-family='monospace' font-size='11' font-weight='700' letter-spacing='1' text-anchor='middle'%3E%3Ctext x='0' y='9'%3EN%3C/text%3E%3Ctext x='90' y='9'%3EE%3C/text%3E%3Ctext x='180' y='9'%3ES%3C/text%3E%3Ctext x='270' y='9'%3EW%3C/text%3E%3Ctext x='360' y='9'%3EN%3C/text%3E%3C/g%3E%3Cg stroke='%235ee6f0' stroke-opacity='.7'%3E%3Cpath d='M0 14v10M45 16v6M90 14v10M135 16v6M180 14v10M225 16v6M270 14v10M315 16v6'/%3E%3Cpath stroke-opacity='.35' d='M15 18v4M30 18v4M60 18v4M75 18v4M105 18v4M120 18v4M150 18v4M165 18v4M195 18v4M210 18v4M240 18v4M255 18v4M285 18v4M300 18v4M330 18v4M345 18v4'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0/360px 30px;animation:heading 38s linear infinite} @keyframes heading{from{transform:translateX(0)}to{transform:translateX(-360px)}} .hud-needle{position:absolute;left:50%;bottom:0;width:0;height:0;translate:-50% 0;border:5px solid transparent;border-bottom-color:var(--hud)} .hud-scan{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,#5ee6f014 70%,#5ee6f03d 99%,#5ee6f0 100%);opacity:.55;animation:scan 7s cubic-bezier(.5,0,.5,1) infinite} @keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(360%)}} .drone-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 45%,#02151880 100%);mix-blend-mode:multiply} @media(prefers-reduced-motion:reduce){.feature-still,.hud-tape,.hud-scan,.hud-reticle{animation:none}.hud-scan{display:none}} /* --- Layout ------------------------------------------------------------- */ .hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:none} @media(max-width:1100px){ .hub{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"person epic" "ep ig" "ep connect"} .hub-col{display:contents} .person-card{grid-area:person}.epic-card{grid-area:epic}.ep-card{grid-area:ep}.ig-card{grid-area:ig}.connect-card{grid-area:connect} .person-card,.epic-card{height:320px} .ig-card,.connect-card{min-height:260px} .hud-compass{width:46%} .feed-rail{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:700px){ /* One stack, person first */ .home main{display:flex;flex-direction:column;gap:var(--space-3);padding-inline:var(--gutter);padding-bottom:var(--space-12)} .home main>.wrap{padding-inline:0;padding-block:0} .hub,.hub-col{display:contents} .person-card{order:1}.quick-links{order:2}.reel{order:3}.ep-card{order:4}.feature-auto{order:5}.feature-drone{order:6}.epic-card{order:7}.connect-card{order:8}.feed{order:9;margin-top:var(--space-6)} .ig-card{display:none} .person-card{flex-direction:column;height:auto} .person-photo{flex:none;aspect-ratio:4/5} .person-photo img{object-position:48% 35%} .person-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000a 100%)} .person-body .card-eyebrow{position:absolute;top:16px;left:16px;z-index:2;padding:7px 10px;border-radius:999px;color:#fff;background:#0d111359;border:1px solid #ffffff24;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .person-body h2{margin-top:0;font-size:2.1rem} .person-body h2 br{display:none} .person-body .person-line{margin:var(--space-3) 0 var(--space-5)} .epic-card{height:auto} .connect-card{min-height:220px} .ep-card.portrait{aspect-ratio:2/3} /* Feature banners become widgets */ .feature-screen{aspect-ratio:auto;max-height:none} .feature-media{position:relative;inset:auto;aspect-ratio:4/5} .feature-auto .feature-media{aspect-ratio:5/4} .feature-shade{background:linear-gradient(0deg,#0c0f10b3 0,#0c0f1000 38%),linear-gradient(180deg,#0c0f1080 0,#0c0f1000 26%)} .feature-meta{top:22px;left:24px;font-size:9.5px} .feature-spec{top:auto;bottom:86px;right:auto;left:24px} .feature-auto .feature-spec{display:none} .feature-cta{left:12px;right:12px;bottom:12px;justify-content:space-between;min-height:54px;border-radius:15px;padding:0 6px 0 18px} .feature-cta .ic{width:42px;height:42px;padding:13px;border-radius:11px} .feature-cta .ic::before,.feature-cta .ic::after{inset:13px} .feature-toggle{top:12px;right:12px;bottom:auto;width:38px;height:38px} .hud-compass{top:auto;bottom:146px;width:70%} .hud-reticle{width:70px;height:70px} .hud-horizon i{width:18%} .hud-horizon i:first-child{translate:calc(-100% - 54px) 0}.hud-horizon i:last-child{translate:54px 0} .feed-head{align-items:flex-start;flex-direction:column} .feed-follow{width:100%} .feed-rail{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) var(--space-2);scroll-padding-inline:var(--gutter);scrollbar-width:none} .feed-rail::-webkit-scrollbar{display:none} .feed-tile{flex:0 0 64%;scroll-snap-align:start} .feed-caption{max-height:3.2em;opacity:1} } /* HUD v2: stronger read */ .hud{filter:drop-shadow(0 0 6px #5ee6f099)} .hud-reticle{width:120px;height:120px;border-color:#5ee6f0a6;border-style:dashed;animation:breathe 4s ease-in-out infinite,spin 40s linear infinite} @keyframes spin{to{rotate:360deg}} .hud-reticle i{opacity:1;height:2px} .hud-reticle i:nth-child(3),.hud-reticle i:nth-child(4){width:2px;height:22px} .hud-horizon i{height:1.5px;width:min(22%,240px);background:linear-gradient(90deg,transparent,var(--hud))} .hud-horizon i:first-child{translate:calc(-100% - 92px) 0} .hud-horizon i:last-child{translate:92px 0;background:linear-gradient(270deg,transparent,var(--hud))} .hud-compass{height:34px;width:min(420px,42%)} .hud-tape{background-size:360px 34px} .hud-ladder{position:absolute;top:28%;bottom:28%;width:34px;opacity:.75;background:repeating-linear-gradient(180deg,var(--hud) 0 1.5px,transparent 1.5px 12px);-webkit-mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(90deg,#000 0 100%);mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);animation:ladder 3s linear infinite} .hud-ladder.l{left:clamp(40px,4vw,62px);background-size:14px 12px;background-repeat:repeat-y} .hud-ladder.r{right:clamp(40px,4vw,62px);background-size:14px 12px;background-repeat:repeat-y;background-position:right 0;animation-direction:reverse} .hud-ladder::before{content:"";position:absolute;top:50%;width:26px;height:2px;background:var(--hud);translate:0 -50%} .hud-ladder.r::before{right:0} @keyframes ladder{to{background-position-y:24px}} @media(max-width:700px){.hud-reticle{width:84px;height:84px}.hud-horizon i:first-child{translate:calc(-100% - 64px) 0}.hud-horizon i:last-child{translate:64px 0}.hud-ladder{top:30%;bottom:38%}.hud-ladder.l{left:22px}.hud-ladder.r{right:22px}} @media(prefers-reduced-motion:reduce){.hud-ladder{animation:none}} .hud-reticle{animation:breathe 4s ease-in-out infinite;border:1.5px solid #5ee6f0cc;box-shadow:0 0 0 1px #00000040,inset 0 0 0 1px #00000040} .hud-horizon i{height:2px} @media(max-width:700px){.home main>*{width:100%;margin-inline:0;max-width:none}} @media(max-width:700px){.hud-compass{top:50px;bottom:auto;width:62%}} /* Punchy line over each banner (desktop and tablet) */ .feature-punch{position:absolute;z-index:4;left:clamp(34px,3.4vw,46px);bottom:calc(clamp(34px,3.4vw,46px) + 68px);margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,1.2rem + 2.6vw,4rem);line-height:.95;letter-spacing:-.05em;color:#f6f7f4;text-shadow:0 2px 30px #0009;pointer-events:none} .feature-punch span{color:#f6c87a} .drone-screen .feature-punch span{color:var(--hud)} .feature-punch{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .feature-screen.is-playing .feature-punch,.feature-screen.is-still .feature-punch,.feature-screen.in-view .feature-punch{opacity:1;transform:none} @media(max-width:700px){.feature-punch{display:none}} @media(prefers-reduced-motion:reduce){.feature-punch{opacity:1;transform:none;transition:none}} /* Smaller Elevated Perspective lockup so the scene breathes */ .ep-mark{width:min(48%,190px)} .ep-lockup{gap:var(--space-2)} .ep-sub{font-size:9.5px} /* Mobile: floating pill button sits below the photo, never on top of it */ @media(max-width:700px){ .feature-toggle{display:none!important} .card-cta.glass,.feature-cta{position:relative;left:auto;right:auto;bottom:auto;margin:10px;width:auto;border-radius:999px;border:1px solid #ffffff1f;min-height:54px;padding:0 7px 0 20px;background:linear-gradient(180deg,#ffffff14,#ffffff08);box-shadow:inset 0 1px 0 #ffffff1a,0 8px 22px -12px #000;-webkit-backdrop-filter:none;backdrop-filter:none} .card-cta.glass:active,.feature-cta:active{transform:scale(.98)} .card-cta.glass .ic,.feature-cta .ic{width:40px;height:40px;padding:12px;border-radius:50%} .feature-cta .ic::before,.feature-cta .ic::after{inset:12px} .feature-screen{display:flex;flex-direction:column;background:#0b0f11} .ep-card{aspect-ratio:auto!important;display:flex;flex-direction:column;justify-content:flex-end;background:#0b0f11} .ep-card .photo-fill{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:2/3} .ep-card::before{bottom:74px} .ep-lockup{left:18px;right:18px;bottom:92px} .ep-mark{width:44%} .ep-card .photo-chip{top:14px;left:14px} } .reel-title h1>span.dot{color:var(--accent);font-weight:700} /* Ambient background: slow drifting light, faint grid, occasional sweep. Sits behind everything. */ html{background:var(--bg)} body{background:transparent;position:relative;isolation:isolate} .ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict} .ambient i{position:absolute;display:block} .ambient .b1,.ambient .b2,.ambient .b3{width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform} .ambient .b1{left:-18vmax;top:-22vmax;background:radial-gradient(circle,oklch(.92 .19 120 / .38),transparent 62%);animation:amb1 46s ease-in-out infinite alternate} .ambient .b2{right:-22vmax;top:18vh;background:radial-gradient(circle,oklch(.85 .11 205 / .30),transparent 62%);animation:amb2 58s ease-in-out infinite alternate} .ambient .b3{left:22vw;bottom:-30vmax;background:radial-gradient(circle,oklch(.85 .09 75 / .26),transparent 62%);animation:amb3 64s ease-in-out infinite alternate} .ambient .grid{inset:-40px;background-image:radial-gradient(circle,color-mix(in oklch,var(--fg),transparent 82%) 1px,transparent 1.4px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 75%);opacity:.5;animation:ambgrid 40s linear infinite} .ambient .sweep{top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(100deg,transparent,color-mix(in oklch,var(--surface),transparent 55%) 50%,transparent);opacity:.0;animation:ambsweep 14s ease-in-out infinite} [data-theme="dark"] .ambient .b1,[data-theme="dark"] .ambient .b2,[data-theme="dark"] .ambient .b3{opacity:.32} [data-theme="dark"] .ambient .grid{opacity:.35} [data-theme="dark"] .ambient .sweep{background:linear-gradient(100deg,transparent,oklch(1 0 0 / .05) 50%,transparent)} @keyframes amb1{to{transform:translate3d(16vw,12vh,0) scale(1.12)}} @keyframes amb2{to{transform:translate3d(-20vw,-8vh,0) scale(.9)}} @keyframes amb3{to{transform:translate3d(-14vw,-16vh,0) scale(1.15)}} @keyframes ambgrid{to{transform:translate3d(28px,28px,0)}} @keyframes ambsweep{0%,70%{transform:translateX(0);opacity:0}78%{opacity:1}100%{transform:translateX(360%);opacity:0}} @media(max-width:700px){.ambient .b1,.ambient .b2,.ambient .b3{filter:blur(50px)}.ambient .grid{background-size:22px 22px}} @media(prefers-reduced-motion:reduce){.ambient i{animation:none!important}} /* Light mode: a bit more presence */ html:not([data-theme="dark"]) .ambient .b1,html:not([data-theme="dark"]) .ambient .b2,html:not([data-theme="dark"]) .ambient .b3{opacity:.85} html:not([data-theme="dark"]) .ambient .b1{background:radial-gradient(circle,oklch(.9 .2 122 / .5),transparent 62%)} html:not([data-theme="dark"]) .ambient .b2{background:radial-gradient(circle,oklch(.82 .12 205 / .42),transparent 62%)} html:not([data-theme="dark"]) .ambient .b3{background:radial-gradient(circle,oklch(.83 .1 72 / .38),transparent 62%)} html:not([data-theme="dark"]) .ambient .grid{opacity:.8} /* Mobile placement fixes: reel title spacing, HUD labels clear of the corner brackets */ @media(max-width:700px){ .reel-title{padding:18px 22px 24px;gap:10px} .reel-title h1{line-height:1.08;padding-bottom:2px} .reel-tags{display:flex;font-size:9px;letter-spacing:.14em;gap:6px;color:#f3f5f280} .feature-meta{top:34px;left:36px;font-size:9px;letter-spacing:.14em} .feature-spec{bottom:34px;left:36px;right:auto;font-size:8.5px;letter-spacing:.14em} } /* Light mode: no green glow, darker dots */ html:not([data-theme="dark"]) .ambient .b1{background:radial-gradient(circle,oklch(.86 .07 230 / .4),transparent 62%)} html:not([data-theme="dark"]) .ambient .grid{background-image:radial-gradient(circle,#0a0c0d4d 1px,transparent 1.4px);opacity:.9} /* iOS Safari ignores parent border-radius on