/* FractalJo concept: cobalt light, editorial type, one hero timeline and a real-work filmstrip. */
:root{--bg:#050811;--panel:#0a1020;--blue:#436bff;--blue2:#7396ff}
body{background:#050811}
.site-header{min-height:76px;background:#050811df;border-bottom:1px solid #7298ef25;backdrop-filter:blur(18px);position:relative;z-index:20}
.brand-wordmark{width:clamp(170px,13vw,235px)}
.header-cta,.hero-actions .button-primary{border:1px solid #85acff88;background:#436bff;box-shadow:0 7px 32px #1d50e54d;transition:transform .25s,box-shadow .25s,background .25s}
.header-cta:hover,.hero-actions .button-primary:hover{background:#5d80ff;box-shadow:0 0 30px #487eff8c;transform:translateY(-2px)}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:0;min-height:min(790px,calc(100svh - 76px));padding-top:30px;padding-bottom:25px;overflow:hidden;background:radial-gradient(ellipse 46% 54% at 74% 48%,#124ab34d,transparent 75%),linear-gradient(105deg,#050811 12%,#071632 76%,#081329)}
.hero:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#050811 0%,#050811e0 33%,transparent 62%),radial-gradient(circle at 86% 20%,#276cff40,transparent 30%);pointer-events:none}
.hero-copy{position:relative;z-index:3;padding-top:0;align-self:center}
.hero-eyebrow{color:#c7d7f6}
.hero-eyebrow .status-dot{box-shadow:0 0 12px #4b8dff,0 0 26px #437eff}
.hero h1{font-size:clamp(64px,6.35vw,126px);line-height:.93;letter-spacing:-.083em;text-transform:uppercase;white-space:nowrap;margin:29px 0 24px;text-shadow:0 10px 30px #01030a87}
.hero h1 em{font-style:normal;color:#7396ff}
.hero-dek{max-width:550px;color:#cbddfa;font-size:clamp(15px,1.1vw,19px);line-height:1.55}
.hero-actions{margin-top:28px}
.hero-foot{margin-top:38px;padding-top:0;color:#9fb7e9}
.hero-foot .hero-scroll{display:none}
.hero-visual.portrait-studio{position:relative;width:calc(100% + 7vw);max-width:none;height:min(680px,72svh);align-self:end;margin:0 -5vw 0 -2vw;overflow:visible}
.portrait-studio:before{width:100%;height:100%;right:0;top:0;opacity:1;background:radial-gradient(ellipse at 52% 45%,#2267fb55,transparent 63%)}
.portrait-studio .portrait-artboard{position:absolute;inset:0;border:0;padding:0;background:none;box-shadow:none;overflow:hidden}
.portrait-studio .hero-photo-wrap{width:100%;height:100%;aspect-ratio:auto;mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 91%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 16%,#000 100%);mask-composite:intersect}
.portrait-studio .hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(1.08) contrast(1.04)}
.portrait-studio .hero-photo{transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.025);transition:transform .35s ease-out}
.portrait-crop-marks,.portrait-credit{display:none}
.portrait-pixels{z-index:2;inset:0}.portrait-pixels i{filter:blur(.25px);box-shadow:0 0 16px #276aff,0 0 42px #2161ff}
.portrait-studio .hero-timeline{position:absolute;z-index:4;left:-14%;bottom:22px;width:112%;margin:0;transform:perspective(900px) rotateX(6deg) rotateZ(3deg);padding:15px 18px;border:1px solid #80abff9c;border-radius:12px;background:linear-gradient(145deg,#0d244be8,#08152acc);backdrop-filter:blur(15px);box-shadow:0 19px 65px #010713b8,0 0 34px #3d73ff54}
.hero-timeline:before{content:'▶   EDIT  /  CREATE  /  FEEL';display:block;margin-bottom:8px;color:#c7e2ff;font:700 9px var(--body);letter-spacing:.13em}
.hero-timeline .mini-tracks i{height:11px}.hero-timeline .mini-tracks i:last-of-type{height:8px}
.ticker{height:70px;margin:-5px 0 0;transform:rotate(1deg) scale(1.03);box-shadow:0 12px 45px #163ffb4d;background:#436bff}
.ticker span{font-size:clamp(20px,2vw,31px);text-transform:uppercase}
.work-library{background:radial-gradient(ellipse 45% 42% at 50% 52%,#1029599c,transparent 80%),#050811;--card-height:clamp(255px,37svh,440px);--ring-radius:calc((var(--card-width) * .98 + 8px) * 5.7150262)}
.work-library.section-pad{padding-top:65px;padding-bottom:55px}
.work-library .section-intro{margin-top:26px;margin-bottom:16px}
.work-library .section-intro h2{font-size:clamp(40px,4.1vw,70px)}
.work-library .section-intro h2 i{color:#7396ff;font-style:normal}
.work-library .filter-bar{margin:13px 0 4px}
.work-library .filter{border-color:#587bb075;background:#09132a;color:#bbd0f5}
.work-library .filter.is-active{background:#dfe9ff;color:#0a1731;box-shadow:0 0 20px #4e7fff6b}
.work-library .showcase-stage{background:radial-gradient(ellipse 32% 55% at 50% 48%,#2264be55,transparent 88%);padding-bottom:12px}
.work-library .showcase-stage:after{content:'';position:absolute;z-index:1;pointer-events:none;inset:auto 0 5px;height:33%;background:linear-gradient(transparent,#0a214057 70%,#050811);transform:perspective(640px) rotateX(60deg) scaleX(1.2);opacity:.65}
.work-library .showcase-backdrop{opacity:.24;filter:blur(58px) saturate(1.25)}
.work-library .showcase-aura{filter:saturate(1.25)}
.work-library .carousel-camera .scene-card{border-radius:9px;border-color:#9ab8ee80;box-shadow:0 22px 38px #0009}
.work-library .carousel-camera .scene-card[data-slot="0"]{border:2px solid #b0c7ff;box-shadow:0 0 0 4px #6b8cff2b,0 0 32px #3f7fff9c,0 30px 70px #000b}
.work-library .carousel-camera .scene-card.side-card:after{background:linear-gradient(transparent 75%,#07102068)}
.work-library .showcase-reflection{opacity:.2;filter:blur(14px)}
.work-library .stage-arrow{background:#0a1a37bb;box-shadow:0 0 18px #2959c869}
.work-library .stage-arrow:hover{background:#436bff;box-shadow:0 0 30px #517fff99}
.work-library .showcase-caption h3{font-size:clamp(24px,2.1vw,34px)}
.work-library #showcase-watch{border:1px solid #8aafff;background:#3161d2;box-shadow:0 6px 20px #2555d45c}
.filmstrip-toolbar{margin-top:12px;margin-bottom:12px}
.video-filmstrip{padding:9px 8px 16px;background:#0a1532;border:1px solid #476caa8f;border-radius:13px;box-shadow:inset 0 0 24px #1c4cac2e,0 12px 35px #0005}
.work-library .thumbnail-button{border-radius:5px;overflow:hidden}
.statement{background:#e2eaff;color:#07142e;padding-top:48px;padding-bottom:46px}
.statement p{margin:29px 0 33px;max-width:1250px}
.statement-star{color:#7c9cf3}
.statement p>span:first-child{background:none;color:#4b72ff;-webkit-text-stroke:1.5px #4b72ff;transition:color .85s ease,background .85s ease}
.statement.is-visible p>span:first-child{color:#4b72ff;-webkit-text-stroke:0}
.statement.is-visible p{animation:concept-reveal .75s cubic-bezier(.17,.78,.29,1) both}
.process-grid>div.is-visible{animation:concept-reveal .65s cubic-bezier(.17,.78,.29,1) both}
.process-grid>div:nth-child(2){animation-delay:.09s}.process-grid>div:nth-child(3){animation-delay:.18s}
@keyframes concept-reveal{from{opacity:.55;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.about,.services{background:#0a1020}
.tool-tile{min-height:178px;background:linear-gradient(155deg,#142647,#0c152b 75%);border-color:#3d5688;transition:transform .3s,border-color .3s,box-shadow .3s}
.tool-tile:after{content:'';position:absolute;z-index:-1;inset:0;border:1px solid transparent;border-radius:inherit;background:radial-gradient(230px circle at var(--spot-x,50%) var(--spot-y,50%),#80a4ff8c,transparent 70%) border-box;opacity:0;transition:opacity .25s;pointer-events:none}
.tool-tile:hover:after{opacity:1}
.tool-tile:hover{box-shadow:0 16px 40px #010817a6,0 0 20px #436bff46}
.services{position:relative}.service-row{transition:background .25s,border-color .25s,padding .25s}.service-row:hover{background:#0e1a38;border-color:#7396ff;padding-left:18px;padding-right:18px;box-shadow:inset 3px 0 #4f75ff}.service-row:hover h3{color:#a9c0ff}
.service-preview{position:fixed;z-index:50;left:var(--preview-x,0px);top:var(--preview-y,0px);width:230px;aspect-ratio:16/10;background:#0b1731;border:1px solid #9dbaff;border-radius:8px;box-shadow:0 20px 60px #000b,0 0 25px #446bff78;overflow:hidden;pointer-events:none;opacity:0;transform:translate(18px,-50%) scale(.92);transition:opacity .22s,transform .22s}
.service-preview.is-visible{opacity:1;transform:translate(18px,-50%) scale(1)}.service-preview img{width:100%;height:100%;object-fit:cover}.service-preview span{position:absolute;bottom:0;left:0;right:0;padding:19px 10px 9px;background:linear-gradient(transparent,#030713ec);font:600 11px/1.25 var(--body);color:#fff}
.process{background:#071020}
.process{position:relative;isolation:isolate}.process-wave{position:absolute;z-index:0;left:4%;right:4%;width:92%;height:150px;top:54%;overflow:visible;opacity:.34;filter:drop-shadow(0 0 10px #4b85ff);pointer-events:none}.process-wave path{fill:none;stroke:#7396ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.process-grid{position:relative;z-index:1}
.process-grid>div{position:relative;min-height:270px;padding:28px 27px;background:linear-gradient(155deg,#13234a,#0a142a 70%);border:1px solid #4c6caf;border-radius:3px 12px 12px 12px;box-shadow:7px 9px 0 #243f7899;transition:transform .3s,box-shadow .3s}
.process-grid>div:before{content:'';position:absolute;top:-15px;left:-1px;width:35%;height:15px;background:#1b3672;border:1px solid #4c6caf;border-bottom:0;border-radius:7px 8px 0 0}
.process-grid>div:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:10px 18px 35px #0007,0 0 24px #4f75ff52}
.process-grid h3{margin-top:48px}
.contact{background:linear-gradient(135deg,#12275b,#2248a4 60%,#122b67)}
.contact-glow{background:radial-gradient(circle,#597dffbd,transparent 68%)}
@media(max-width:1200px){.hero h1{font-size:clamp(57px,6.3vw,87px)}.hero-visual.portrait-studio{height:min(600px,65svh)}.portrait-studio .hero-timeline{width:104%;left:-8%}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:50px}.hero-copy{padding-top:0}.hero h1{font-size:clamp(68px,10vw,105px);white-space:normal}.hero-visual.portrait-studio{height:clamp(420px,70vw,650px);width:min(100%,680px);margin:-20px auto 35px}.portrait-studio .hero-timeline{width:95%;left:3%;bottom:-8px}.work-library .section-intro{display:flex}.work-library .section-intro p{font-size:14px}.process-grid>div{min-height:230px}.process-grid h3{margin-top:26px}}
@media(max-width:900px){.service-preview{display:none}}
@media(max-width:760px){.site-header{min-height:70px}.hero{padding:35px 20px 36px}.hero h1{font-size:clamp(50px,11.2vw,78px);margin:22px 0}.hero-dek{font-size:15px}.hero-visual.portrait-studio{height:clamp(340px,92vw,560px);width:calc(100% + 24px);margin:4px -12px 22px}.portrait-studio .hero-photo-wrap{mask-image:linear-gradient(0deg,transparent,#000 15%,#000 100%)}.portrait-studio .hero-timeline{bottom:0;left:5%;width:90%;padding:10px}.hero-timeline:before{font-size:7px}.ticker{height:56px}.work-library .section-intro{display:block}.work-library .section-intro p{margin-top:17px}.work-library.section-pad{padding-top:50px;padding-bottom:45px}.work-library{--card-height:clamp(220px,42svh,350px)}.work-library .showcase-caption h3{font-size:22px}.video-filmstrip{gap:8px;padding:6px 5px 13px}.process-grid>div{min-height:205px}.process-grid h3{margin-top:20px}.statement p{font-size:clamp(40px,10vw,69px)}}
@media(max-width:430px){.hero h1{font-size:clamp(47px,11.2vw,60px)}.hero-foot{margin-top:24px}.hero-visual.portrait-studio{height:330px}.portrait-studio .hero-timeline{bottom:-4px}.work-library{--card-height:clamp(210px,34svh,285px)}}
@media(prefers-reduced-motion:reduce){.hero .portrait-pixels i,.ticker-track,.process-grid>div,.statement.is-visible p{animation:none!important;transition:none!important}.portrait-studio .hero-photo{transform:none!important}.statement p>span:first-child{color:#4b72ff;-webkit-text-stroke:0}}