/* Portfolio masonry frames, moving in opposite directions. */
#top.mil-hero-4{height:max(850px,100vh);background:#fff;overflow:hidden}
#top .mil-hero-scene,#top>.mil-overlay{display:none}
#top .mil-hero-main{width:100%;max-width:none;padding:180px 4vw 100px;align-items:center}
#top .mil-hero-text{width:40%;position:relative;z-index:2}
#top h1.mil-head1{font-size:clamp(40px,4vw,84px);display:flex;flex-direction:column;gap:.08em;line-height:1}
#top h1.mil-head1>span{display:block;margin:0!important;padding:0!important;font-size:100%!important;line-height:1!important}
#top .mil-circle-text-frame{display:none}
.id-collage{position:absolute;top:155px;right:2vw;bottom:0;width:55vw;background:#fff;overflow:hidden;isolation:isolate}
.id-frames-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 2px}
.id-frame-column{position:relative;overflow:hidden;min-width:0;height:100%}
.id-frame-track{width:100%;will-change:transform;animation-duration:var(--duration,180s);animation-timing-function:linear;animation-iteration-count:infinite}
.id-frame-up{animation-name:frames-rise}
.id-frame-down{animation-name:frames-fall}
.id-frame-group{display:flex;flex-direction:column;gap:22px;padding-bottom:22px}
.id-frame-card{display:block;flex:none;width:100%;box-sizing:border-box;border:2px solid #ccc;background:#fff;border-radius:0;overflow:hidden}
.id-frame-card img{display:block;width:100%!important;height:auto!important;max-width:100%;object-fit:contain!important;transform:none!important;border-radius:0}
.id-frame-card:focus-visible{outline:2px solid #dd1e36;outline-offset:-3px}
@keyframes frames-rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes frames-fall{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(max-width:1000px){#top.mil-hero-4{height:auto;min-height:100vh}#top .mil-hero-main{display:block;padding:160px 5vw 35px}#top .mil-hero-text{width:100%}#top h1.mil-head1{font-size:clamp(42px,7vw,76px)}#top .mil-stylized{margin-bottom:32px}.id-collage{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:110vw;min-height:500px;max-height:900px;margin-top:40px}.id-frames-gallery{gap:16px}.id-frame-group{gap:16px;padding-bottom:16px}}
@media(prefers-reduced-motion:reduce){.id-frame-track{animation:none}.id-collage{overflow:auto}.id-frame-column{overflow:visible}}

/* Let the moving header photographs reach the page's top edge behind navigation. */
@media(min-width:1001px){#top .id-collage{top:0;bottom:0}}
body:has(#top .id-frames-gallery) .mil-top-panel-2:not(.mil-scroll):not(.ivette-mobile-nav-open){background:transparent!important;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body:has(#top .id-frames-gallery) .mil-top-panel-2:not(.mil-scroll) #swup-opm>ul>li>a,
body:has(#top .id-frames-gallery) .mil-top-panel-2:not(.mil-scroll) .ivette-portfolio-dropdown>summary{text-shadow:0 1px 3px #fff,0 -1px 3px #fff}

/* Shared left edge for the visible logo, introduction, and headline. */
body:has(#top .id-frames-gallery){--hero-left:calc(4vw - 10px)}
#top .mil-hero-main{padding-left:var(--hero-left)!important}
#top .mil-hero-text,#top .mil-hero-text p,#top .mil-hero-text h1{text-align:left!important;margin-left:0!important}
body:has(#top .id-frames-gallery) .mil-top-panel-2 .mil-left-side{position:absolute;left:var(--hero-left);margin:0;padding:0}
body:has(#top .id-frames-gallery) .mil-top-panel-2 .mil-left-side .mil-logo{display:block;margin:0;padding:0}
body:has(#top .id-frames-gallery) .mil-top-panel-2 .mil-left-side .mil-logo img{display:block;width:158.65px!important;height:auto!important;margin:0;padding:0}
@media(max-width:1000px){body:has(#top .id-frames-gallery){--hero-left:max(22px,calc(5vw - 10px))}}

/* One consistent page gutter for section headings and supporting copy. */
#smooth-content .container:not(.container .container):not(.mil-hero-main){width:auto!important;max-width:none!important;margin-left:var(--hero-left)!important;margin-right:var(--hero-left)!important;padding-left:0!important;padding-right:0!important}
#smooth-content .container .container{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
#smooth-content h1,#smooth-content h2,#smooth-content h3,#smooth-content p{text-align:left}
#services .mil-item-text{width:100%;text-align:left}
#services .mil-deco-text{padding-left:0!important;border-left:0!important;margin-left:0!important}
#services .mil-shortened{width:100%!important;max-width:1150px}
#about>.container>.row{display:block}
#about>.container>.row>[class*=col-]{width:100%!important;max-width:1150px!important;flex:none}
#services>.container>.row>.col-12>h2{white-space:normal;overflow-wrap:normal;line-height:1.15}
#services>.container>.row>.col-12>h2>span{display:inline-block}

#services .mil-up{transform:none!important}

/* Keep the animated gallery confined to the opening header. */
body.id-section-selected #top .id-collage,body.id-gallery-offscreen #top .id-collage{visibility:hidden!important;pointer-events:none}
body.id-section-selected .id-frame-track,body.id-gallery-offscreen .id-frame-track{animation-play-state:paused}
#services,#about{position:relative;background:#fff}
body:has(#top .id-frames-gallery) .mil-top-panel-2.mil-scroll{background:#fff!important;backdrop-filter:none!important}

/* Thirty-percent white fade over photos near the top navigation. */
.id-frames-gallery::after{content:"";position:absolute;z-index:5;top:0;left:0;right:0;height:180px;background:linear-gradient(to bottom,rgba(255,255,255,.95) 0%,rgba(255,255,255,.64) 48%,rgba(255,255,255,0) 100%);pointer-events:none}

/* Remove the rule beneath the Services introduction. */
#services .mil-services-list>.mil-service-item:first-child{border-top:0!important}

/* No divider rules between or below the service categories. */
#services .mil-services-list,#services .mil-services-list>.mil-service-item{border-top:0!important;border-bottom:0!important}

/* Rhythmic four-second upward sweeps; the second column follows 180ms later. */
.id-frame-sweep{animation:none!important;will-change:transform}

body:has(#top .id-frames-gallery) .mil-top-panel-2.ivette-mobile-nav-open{background:#000!important}

/* Keep the Portfolio expansion symbol beside its label. */
#ivette-mobile-menu summary{display:flex;align-items:center;justify-content:flex-start;gap:10px}
#ivette-mobile-menu summary::after{float:none;display:inline-block;margin:0;flex:0 0 auto}

/* Restore the circular scroll prompt on phones and tablets. */
@media(max-width:1199px),(hover:none),(pointer:coarse){
#top .mil-hero-main .mil-hero-text .mil-circle-text-frame{display:block;position:relative;bottom:auto;right:auto;width:190px;height:190px;margin:20px 0 0;background:transparent}
#top .mil-circle-text-frame .mil-circle-text{height:100%}
#top .mil-circle-text-frame .mil-circle-text svg text{fill:#c9c9c9!important}
#top .mil-circle-text-frame .mil-circle-text .mil-arrow{background:transparent!important}
}

/* Small scroll prompt beside the Accessory line on mobile/tablet. */
@media(max-width:1199px),(hover:none),(pointer:coarse){
#top h1.mil-head1>span:last-child{position:relative;width:fit-content}
#top .mil-hero-main .mil-hero-text .mil-circle-text-frame{display:block;position:absolute;left:calc(100% + 7px);top:50%;right:auto;bottom:auto;width:40px;height:40px;margin:0;transform:translateY(-50%)}
#top .mil-circle-text-frame .mil-circle-text svg{width:40px;height:40px;transform:none}
#top .mil-circle-text-frame .mil-circle-text .mil-arrow i{font-size:18px}
}

@media(max-width:1199px),(hover:none),(pointer:coarse){#top .mil-hero-main .mil-hero-text .mil-circle-text-frame{left:var(--scroll-circle-left,calc(100% + 7px))}}

/* Black mobile/tablet navigation icons, matching desktop. */
@media(max-width:1199px),(hover:none),(pointer:coarse){
body:has(#top) .mil-top-panel-2 .ivette-mobile-toggle,body:has(#top) .mil-top-panel-2 .mil-buttons .mil-tp-btn{color:#000!important}
body:has(#top) .mil-top-panel-2 .ivette-mobile-toggle span{background:#000!important}
body:has(#top) .mil-top-panel-2.ivette-mobile-nav-open .ivette-mobile-toggle,body:has(#top) .mil-top-panel-2.ivette-mobile-nav-open .mil-buttons .mil-tp-btn{color:#d2d2d0!important}
body:has(#top) .mil-top-panel-2.ivette-mobile-nav-open .ivette-mobile-toggle span{background:#d2d2d0!important}
}

/* Tighten each service heading-to-description gap by seven pixels. */
#services .mil-service-item h3.mil-mb30{margin-bottom:23px!important}

/* Match the comp: reduce the space after a description before the next category. */
#services .mil-services-list>.mil-service-item:not(:last-child)>.mil-item-text{margin-bottom:10px!important}

/* Balance the Services title against the whitespace below its last line. */
#services{padding-top:20px}

/* Bring desktop footer navigation 35px closer to the closing statement. */
@media(min-width:1200px) and (hover:hover) and (pointer:fine){.ivette-closing-statement{padding-bottom:0!important}.ivette-closing-statement+footer.mil-portfolio-footer{padding-top:26px!important}}

/* Center the closing statement beneath the experience slider. */
#smooth-content .ivette-closing-statement>.container{display:flex;flex-direction:column;align-items:center}
#smooth-content .ivette-closing-statement p,#smooth-content .ivette-closing-statement h2{text-align:center!important;width:100%}
#smooth-content .ivette-closing-statement .ivette-closing-line{text-align:center}

/* Enlarge the mobile/tablet scroll prompt by seven percent. */
@media(max-width:1199px),(hover:none),(pointer:coarse){
#top .mil-hero-main .mil-hero-text .mil-circle-text-frame{width:47.08px;height:47.08px}
#top .mil-circle-text-frame .mil-circle-text svg{width:47.08px;height:47.08px}
#top .mil-circle-text-frame .mil-circle-text .mil-arrow i{font-size:21.186px}
}

/* Crisp gray circular lettering and a clean red arrow, matching the supplied comp. */
#top .ivette-scroll-prompt{display:block;width:100%;height:100%;line-height:1;transform:none;text-decoration:none}
#top .ivette-scroll-prompt .ivette-scroll-svg{display:block;width:100%;height:100%;transform:none;overflow:visible}
#top .ivette-scroll-lettering{transform-origin:50px 50px;animation:ivette-scroll-lettering 22s linear infinite}
@keyframes ivette-scroll-lettering{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#top .ivette-scroll-lettering{animation:none}}

/* Phone/tablet content must never depend on scroll-reveal completion. */
@media (max-width:1199px), (hover:none), (pointer:coarse) {
  #smooth-wrapper { position:relative !important; inset:auto !important; height:auto !important; overflow:visible !important; }
  #smooth-content { transform:none !important; }
  #smooth-content .mil-up { opacity:1 !important; visibility:visible !important; transform:none !important; }
}

/* Keep service copy and portfolio images visible during scroll transitions. */
#services .mil-up,
.mil-work-card .mil-cover.mil-up,
#reviews .mil-up {
  opacity: 1 !important;
  transform: none !important;
}

/* Reduce the gap between Services and About on phones and tablets. */
@media (max-width: 1199px), (pointer: coarse) {
  #services .mil-services-list.mil-mb160 { margin-bottom: 105px; }
}
@media (max-width: 768px) {
  #services .mil-services-list.mil-mb160 { margin-bottom: 65px; }
}