/* Keep section labels, but let the content lead instead of numbered chapters. */
.work-library .section-kicker span:first-child::before,
.about .section-kicker span:first-child::before,
.tools-band .section-kicker span:first-child::before,
.services .section-kicker span:first-child::before,
.process .section-kicker span:first-child::before,
.contact .section-kicker span:first-child::before{content:none}

/* A recognizable WhatsApp mark replaces the generic dot beside this action. */
.contact-secondary::before{
  content:'';
  display:inline-block;
  flex:none;
  width:17px;
  height:17px;
  margin:0 -13px 0 0;
  background:url('assets/tools/whatsapp-user-cropped.png') center/contain no-repeat;
}
@media(max-width:600px){
  .contact-secondary::before{width:15px;height:15px;margin-right:-4px}
}

/* Chapter labels are removed so the portfolio reads as one continuous story. */
.work-library .section-kicker,.about .section-kicker,.tools-band .section-kicker,
.services .section-kicker,.process .section-kicker,.contact .section-kicker{display:none}
.work-library .section-intro,.services .services-head{margin-top:0}
.about .about-grid{margin-top:0}
.tools-band .workflow-panel{margin-top:0;padding-top:0;border-top:0}
.contact .contact-content{margin-top:0}

/* Keep the personal introduction even though the numbered section labels are gone. */
.about-person-label{display:block;margin:0 0 16px;color:#94baff;font-size:10px;font-weight:800;letter-spacing:.17em}

/* The script fills the ribbon to the viewport and measures one phrase group for a seamless loop. */
.ticker-track{gap:0;animation-name:ticker-seamless;will-change:transform}
.ticker-copy{display:flex;flex:none;align-items:center;gap:22px;padding-right:22px}
.ticker-track{width:max-content;min-width:0}
.ticker-copy{white-space:nowrap}
.ticker-copy span{background:none;box-shadow:none}
@keyframes ticker-seamless{to{transform:translate3d(var(--ticker-loop-distance,-50%),0,0)}}

/* Make the shirt mark visible above the decorative edit timeline. */
@media(min-width:801px){
  .portrait-studio .hero-photo{transform:translate3d(calc(var(--photo-x,0px) - 28px),calc(var(--photo-y,0px) - 42px),0) scale(.99)}
  .portrait-studio .hero-timeline{bottom:-4px;padding:7px 12px 8px}
  .portrait-studio .hero-timeline .timeline-top{margin-bottom:4px}
  .portrait-studio .hero-timeline .mini-tracks i{height:7px}
}
.portrait-studio .hero-person-lettering{left:auto;right:9%;top:29%;width:174px;font-size:clamp(17px,1.4vw,23px);line-height:1.02;text-align:left;transform:rotate(-9deg);text-shadow:0 2px 10px #001235,0 0 17px #2e7dff}
.portrait-studio .hero-person-lettering span{margin-left:0}
.hero-motto{position:absolute;z-index:5;left:-8%;top:auto;bottom:106px;color:#d9e8ff;font:800 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 12px #145cdd;transform:rotate(2deg)}
.hero-motto b{color:#79acff;font-size:16px;font-weight:400;margin:0 4px}

/* The supplied cube nebula fills the whole hero, from the header edge to the ribbon. */
.hero{background:#06112a url('assets/decor/studio-nebula-user.jpg') center 47%/cover no-repeat}
.hero:before{background:linear-gradient(90deg,#03091bc2 0%,#03091bb3 32%,#03091b78 52%,#03091b21 82%),linear-gradient(180deg,#03091b38 0%,transparent 31%,transparent 70%,#03091b80 100%)}
.portrait-studio .hero-nebula{display:none}
.portrait-studio .portrait-artboard{z-index:1;overflow:visible}
.portrait-studio .hero-photo-wrap{inset:0;overflow:visible;mask-image:none;background:none}
.portrait-studio .hero-photo-wrap::before{display:none}
.portrait-studio .hero-photo{object-fit:contain;object-position:center bottom;mask-image:none;filter:drop-shadow(0 6px 24px #00133ca6) saturate(1.03)}
.portrait-studio .hero-cube{display:block;z-index:0;opacity:.77}
.portrait-studio .hero-cube-a{right:10%;left:auto;top:-2%;width:clamp(90px,9vw,150px);opacity:.82;filter:drop-shadow(0 0 24px #1977ff8c)}
.portrait-studio .hero-cube-b{left:0;top:31%;width:clamp(70px,7vw,112px)}
.portrait-studio .hero-cube-c{left:24%;top:5%;width:clamp(58px,5.4vw,86px);opacity:.64;filter:drop-shadow(0 0 20px #51a3ff);animation-delay:-4.5s}
.portrait-studio .hero-cube-b{left:7%;top:28%}
.site-header .header-cta:hover,.site-header .header-cta:focus-visible{background:#dce8ff;color:#07142b;border-color:#dce8ff;text-shadow:none}
.site-header .header-cta:hover span,.site-header .header-cta:focus-visible span{color:inherit}
@media(min-width:1101px){
  .work-library{--card-height:clamp(305px,39svh,450px)}
  .work-library .showcase-stage{min-height:calc(var(--card-height) + 140px)}
  .work-library .video-filmstrip{scroll-padding-inline:8px}
  .work-library .video-thumbnail{scroll-snap-align:center}
}
.work-library .filmstrip-shell{position:relative;width:100%;min-width:0;padding-bottom:7px;overflow:hidden}
.work-library .filmstrip-shell::before{content:'';position:absolute;z-index:5;left:40px;right:6px;bottom:3px;height:3px;border-radius:3px;background:#244369}
.work-library .filmstrip-shell::after{content:'';position:absolute;z-index:6;left:40px;bottom:3px;height:3px;width:var(--strip-progress,8%);border-radius:3px;background:#5a93ff;box-shadow:0 0 7px #3f80ff;transition:width .35s ease}
.work-library .video-filmstrip{min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;padding:13px 6px 2px;align-items:start}
.work-library .video-filmstrip::-webkit-scrollbar{display:none}
.work-library .video-thumbnail{position:relative;flex:0 0 clamp(93px,6.7vw,120px);width:clamp(93px,6.7vw,120px)}
.work-library .video-thumbnail[aria-pressed="true"]::before{content:'';position:absolute;z-index:7;top:-10px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #e4f2ff;filter:drop-shadow(0 0 5px #5c9fff)}
.work-library .thumbnail-title{position:static;display:block;width:100%;height:auto;max-height:1.4em;overflow:hidden;clip-path:none;white-space:nowrap;text-overflow:ellipsis;color:#a9c0e8;font:600 8px/1.4 var(--body);margin-top:3px}
.work-library .video-thumbnail[aria-pressed="true"] .thumbnail-title{color:#f4f8ff}
.work-library .thumbnail-image{aspect-ratio:16/9}
.work-library .filmstrip-play{align-self:stretch}
.work-library .video-thumbnail[aria-pressed="true"] .thumbnail-image{box-shadow:0 0 0 2px #7da8ff,0 0 20px #4289ff96}
.work-library .video-thumbnail[aria-pressed="true"] .thumbnail-image::after{content:'';position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;background:#d8efff;box-shadow:0 0 5px 2px #2f83ff;pointer-events:none}
.work-library .video-thumbnail[aria-pressed="true"] .thumbnail-image::after,.work-library .video-thumbnail[aria-pressed="true"]::before{content:none}
.filmstrip-playhead{position:absolute;z-index:8;top:1px;left:0;width:24px;height:64px;object-fit:contain;pointer-events:none;transform:translateX(calc(var(--playhead-x,68px) - 50%))}
.filmstrip-playhead.is-instant,.motion-paused .filmstrip-playhead{transition:none}
.motion-paused .work-library .video-filmstrip{scroll-behavior:auto}
/* Echo the supplied cube atmosphere lightly through the dark chapters. */
.work-library,.about,.tools-band,.services{position:relative;isolation:isolate}
.work-library::before,.about::before,.tools-band::before,.services::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/decor/studio-nebula-user.jpg') center/cover no-repeat;opacity:.14}
.work-library>*,.about>*,.tools-band>*,.services>*{position:relative;z-index:1}
.tools-band>.tools-side-art{position:absolute}
.hero-edit-cursor{position:absolute;z-index:2;left:-26%;bottom:8%;width:32px;height:44px;background:linear-gradient(140deg,#e7f6ff,#4d9fff 64%,#2950d5);clip-path:polygon(5% 0,92% 60%,57% 63%,70% 100%,51% 100%,38% 67%,12% 91%);filter:drop-shadow(0 0 11px #458bff);transform:rotate(-15deg);pointer-events:none}
@media(min-width:801px){
  .contact .software-cluster{transform:translateY(34px)}
  .contact .cluster-resolve{bottom:2%}
  .contact .cluster-ae{top:-3%;z-index:6}
  .contact .cluster-ps{top:5%;z-index:4}
  .contact .cluster-tags{display:block;left:65%;top:4%;width:35%;height:96%}
  .contact .cluster-tags span{position:absolute;grid-column:auto;padding:7px 12px;box-shadow:inset 0 1px #d6e8ff78,0 7px 12px #04143e8c,0 0 12px #367dff80;--rest-angle:0deg}
  .contact .cluster-tags span:nth-child(1){left:0;top:7%;--rest-angle:-10deg}
  .contact .cluster-tags span:nth-child(2){left:31%;top:28%;--rest-angle:8deg}
  .contact .cluster-tags span:nth-child(3){left:-3%;top:44%;--rest-angle:-6deg}
  .contact .cluster-tags span:nth-child(4){left:23%;top:64%;--rest-angle:9deg}
  .contact .cluster-tags span:nth-child(5){left:-12%;top:82%;--rest-angle:-11deg}
  .contact .software-cluster:not(.drop-ready) .cluster-tags span{transform:rotate(var(--rest-angle))}
  .contact .software-cluster.drop-ready .cluster-icon,.contact .software-cluster.drop-ready .cluster-tags span{opacity:0}
  .contact .software-cluster.drop-ready.is-settled .cluster-icon,.contact .software-cluster.drop-ready.is-settled .cluster-tags span{opacity:1;transform:rotate(var(--rest-angle))}
  .contact .cluster-pr{--rest-angle:-7deg;--drop-delay:.08s}.contact .cluster-ae{--rest-angle:-6deg;--drop-delay:.27s}.contact .cluster-ps{--rest-angle:-8deg;--drop-delay:.34s}.contact .cluster-ai{--rest-angle:3deg;--drop-delay:.18s}.contact .cluster-blender{--rest-angle:8deg;--drop-delay:.43s}.contact .cluster-resolve{--rest-angle:5deg;--drop-delay:.52s}
  .contact .cluster-tags span:nth-child(1){--drop-delay:.54s}.contact .cluster-tags span:nth-child(2){--drop-delay:.64s}.contact .cluster-tags span:nth-child(3){--drop-delay:.73s}.contact .cluster-tags span:nth-child(4){--drop-delay:.79s}.contact .cluster-tags span:nth-child(5){--drop-delay:.86s}
  .motion-paused .contact .software-cluster.drop-ready .cluster-icon,.motion-paused .contact .software-cluster.drop-ready .cluster-tags span{opacity:1;transform:rotate(var(--rest-angle))}
}
@media(prefers-reduced-motion:reduce){.contact .software-cluster.drop-ready .cluster-icon,.contact .software-cluster.drop-ready .cluster-tags span{opacity:1!important;transform:rotate(var(--rest-angle,0deg))!important}}
.site-header .header-cta:hover,.site-header .header-cta:focus-visible{background:#3975ff;color:#fff;border-color:#83a9ff;box-shadow:0 0 25px #3675ff7a;text-shadow:none}
@media(min-width:801px){
  .portrait-studio .hero-photo{transform:translate3d(calc(var(--photo-x,0px) + 25px),var(--photo-y,0px),0) scale(1.1);transform-origin:center bottom}
  .portrait-studio .hero-timeline{left:-19%;width:87%}
}
@media(max-width:800px){.hero{background-position:56% center}.hero:before{background:linear-gradient(180deg,#03091bc2 0%,#03091b9c 44%,#03091b26 72%,#03091b80 100%)}.portrait-studio .hero-person-lettering{left:auto;right:4%;top:6%;font-size:17px;width:128px;text-align:right}.portrait-studio .hero-person-lettering span{margin-left:auto}.portrait-studio .hero-cube-a{right:4%;top:33%;width:clamp(58px,11vw,90px)}.hero-motto{left:6%;top:auto;bottom:114px;font-size:9px}.portrait-studio .hero-cube-c,.hero-edit-cursor{display:none}}
@media(max-width:800px){.portrait-studio .hero-photo{transform:translate3d(var(--photo-x,0px),calc(var(--photo-y,0px) - 48px),0) scale(1.03);transform-origin:center bottom}}
@media(max-width:430px){.portrait-studio .hero-person-lettering{top:5%;right:3%;font-size:14px;width:112px}.hero-motto{left:4%;bottom:116px;font-size:8px}.hero-motto b{font-size:10px;margin:0 1px}.portrait-studio .hero-photo{transform:translate3d(var(--photo-x,0px),calc(var(--photo-y,0px) - 58px),0) scale(1.03)}}

/* A restrained glass cube fills the open space without competing with the app icons. */
.tools-band{position:relative;isolation:isolate;overflow:hidden}
.tools-band .tool-grid,.tools-band .workflow-panel{position:relative;z-index:2}
.tools-side-art{position:absolute;z-index:1;left:calc(4.1vw + 1040px);right:4.1vw;top:23px;bottom:14px;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 52% 50%,#2564c354,transparent 65%)}
.tools-side-art img{width:min(77%,210px);max-height:100%;object-fit:contain;filter:drop-shadow(0 0 22px #3272ff75);transform:rotate(-10deg)}
.tools-side-orbit{position:absolute;width:180px;height:100px;border:1px solid #5e91fc60;border-radius:50%;transform:rotate(-27deg)}
.tools-side-pixel{position:absolute;width:9px;height:9px;background:#5e97ff;box-shadow:0 0 13px #62a4ff}
.tools-side-pixel-a{top:28%;right:11%}.tools-side-pixel-b{bottom:16%;left:18%;width:5px;height:5px}
.tools-side-line{position:absolute;width:42%;height:1px;bottom:19%;right:2%;background:linear-gradient(90deg,#6da0ff91,transparent)}
@media(max-width:1360px){.tools-side-art{display:none}}

/* Let the selected service surface ease in after an intentional hover. */
.services .service-list .service-row::before{transition:opacity .48s ease}
.services .service-list .service-row{transition:border-color .42s ease,box-shadow .42s ease}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.services .service-list .service-row::before{transition:none}}

/* Extra specialties stay readable on a narrow phone screen. */
@media(max-width:600px){
  .ticker-track{gap:0}.ticker-copy{gap:15px;padding-right:15px}
}

/* Phone and tablet proportions. Desktop composition remains unchanged. */
@media(max-width:800px){
  .portrait-studio .hero-person-lettering{right:10%;top:12%;text-align:right}
}
@media(max-width:600px){
  .portrait-studio .hero-person-lettering{right:11%;top:11%;width:118px;font-size:14px}

  .work-library{--card-height:clamp(190px,29svh,235px)}
  .work-library .carousel-camera{height:calc(var(--card-height) + 20px)}
  .work-library .stage-arrow{top:calc(28px + var(--card-height) / 2)}
  .work-library .showcase-reflection{height:55px}
  .work-library .showcase-caption{padding-bottom:48px}
  .work-library .filmstrip-toolbar{margin-top:8px;min-height:30px}
  .work-library .filmstrip-shell{padding-bottom:5px}
  .work-library .filmstrip-play{flex-basis:34px}
  .work-library .video-filmstrip{padding:10px 5px 1px;gap:5px}
  .work-library .video-thumbnail{flex:0 0 72px;width:72px}
  .work-library .thumbnail-image{height:auto;aspect-ratio:16/9}
  .work-library .thumbnail-title{font-size:7px}
  .work-library .thumbnail-duration{font-size:7px}
  .filmstrip-playhead{height:51px;width:20px}
  .work-library .filmstrip-shell::before,.work-library .filmstrip-shell::after{left:35px}

  .contact{padding-bottom:5px}
}
@media(max-width:380px){
  .work-library{--card-height:clamp(185px,28svh,220px)}
  .work-library .video-thumbnail{flex-basis:66px;width:66px}
}

/* Let the carousel sit in the section atmosphere instead of a dark box. */
.work-library .showcase-stage{background:transparent}
.work-library .showcase-wash{background:radial-gradient(ellipse 52% 55% at 50% 53%,#1b60c62b,transparent 82%)}
.work-library .showcase-backdrop{opacity:.13;mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000,transparent 90%)}
.work-library .showcase-stage::after{opacity:0}

/* Scale the laptop arrangement as a single composition below desktop widths. */
@media(max-width:1050px){
  .contact .software-cluster{width:min(100%,600px);height:auto;aspect-ratio:836/395;container-type:inline-size;margin-bottom:0}
  .contact .software-cluster .cluster-icon{height:auto;aspect-ratio:1}
  .contact .cluster-pr{left:7%;top:auto;bottom:3%;width:16.5%;--rest-angle:-7deg}
  .contact .cluster-ae{left:24%;top:24%;bottom:auto;width:16%;--rest-angle:-6deg}
  .contact .cluster-ps{left:39%;top:29%;bottom:auto;width:16%;--rest-angle:-8deg}
  .contact .cluster-ai{left:26%;top:auto;bottom:2%;width:16.5%;--rest-angle:3deg}
  .contact .cluster-blender{left:50%;top:36%;bottom:auto;width:14%;--rest-angle:8deg}
  .contact .cluster-resolve{left:44%;top:auto;bottom:2%;width:19%;--rest-angle:5deg}
  .contact .cluster-tags{display:block;left:65%;top:30%;width:34%;height:67%}
  .contact .cluster-tags span{position:absolute;grid-column:auto;padding:clamp(3px,.7cqw,6px) clamp(6px,1.1cqw,11px);font-size:clamp(8px,2cqw,12px);line-height:1;box-shadow:inset 0 1px #d6e8ff78,0 7px 12px #04143e8c,0 0 12px #367dff80;transform:rotate(var(--rest-angle))}
  .contact .cluster-tags span:nth-child(1){left:0;top:0;--rest-angle:-10deg}
  .contact .cluster-tags span:nth-child(2){left:43%;top:22%;--rest-angle:8deg}
  .contact .cluster-tags span:nth-child(3){left:-2%;top:43%;--rest-angle:-6deg}
  .contact .cluster-tags span:nth-child(4){left:31%;top:65%;--rest-angle:9deg}
  .contact .cluster-tags span:nth-child(5){left:-11%;top:85%;--rest-angle:-11deg}
}
@media(min-width:601px) and (max-width:800px){
  .contact{padding:38px 28px 8px}
  .contact .contact-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:end}
  .contact .contact-content>div:first-child{grid-column:1;grid-row:1}
  .contact .contact-side{grid-column:1;grid-row:2;margin-top:12px}
  .contact .contact-side{gap:6px}
  .contact .contact-primary,.contact .contact-secondary{padding:10px 12px;gap:12px;font-size:9px}
  .contact h2{font-size:clamp(38px,5.8vw,48px)}
  .contact .software-cluster{grid-column:2;grid-row:1/3;justify-self:end;align-self:end;width:100%;margin:0}
}
@media(max-width:600px){
  .contact .software-cluster{margin-top:14px}
}
