/* ================================================================
   PREMIUM TINTS & WRAPS — FINAL MOTION & DETAIL PASS / 9.7
   Native, progressive enhancement. All essential content is visible
   without JavaScript. No scroll trapping, content opacity gates, or
   endless particle fields beyond the existing viewport-guarded ambience.
   ================================================================ */
:root{--polish-ease:cubic-bezier(.19,1,.22,1);--accent-blue:#0757e8}
/* A meaningful reading indicator rather than an ornamental label. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:250;pointer-events:none;background:var(--accent-blue);transform:scaleX(0);transform-origin:left center;will-change:transform}
/* One composed opening: photo becomes visible as the title settles in. */
.hero-atelier .hero-photo{isolation:isolate}
.hero-atelier .hero-photo::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:#080d12;transform:scaleX(0);transform-origin:right;}
.js .hero-atelier .hero-photo::before{animation:ptw-unveil 1.25s .12s var(--polish-ease) both}
@keyframes ptw-unveil{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* Parallax is capped and affects only photographs, not layout or text. */
.hero-atelier .hero-photo img{transform:translate3d(0,var(--hero-drift,0px),0) scale(1.055)!important;transition:filter .7s ease,transform 1.35s var(--polish-ease)!important}
.loaded .hero-atelier .hero-photo img{transition:filter .7s ease,transform .15s linear!important}
/* Camera-depth treatment for a handful of real workshop images. */
.intro-portrait,.work-feature-photo,.quote-photo,.detail-photo{isolation:isolate}
.intro-portrait img,.work-feature-photo img,.quote-photo img,.detail-photo img{transform:translate3d(0,var(--depth-drift,0px),0) scale(1.075);will-change:transform;transition:filter .5s ease}
/* A deliberate photo interaction: the hero scene stays calm; the detail views respond. */
@media(hover:hover) and (pointer:fine){
  .work-feature-photo img{transition:transform .35s ease,filter .7s ease}
  .work-feature-photo:hover img,.work-feature-photo:focus-visible img{filter:saturate(.98) contrast(1.045)}
  .pixel-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,30%),rgba(7,87,232,.085),transparent 75%);transition:opacity .55s ease}
  .pixel-card:hover::after,.pixel-card:focus-within::after{opacity:1}
  .js .service-cards .pixel-card.v8-enter.v8-visible:hover, .js .service-cards .pixel-card.v8-enter.v8-visible:focus-within{transform:translateY(-5px);box-shadow:0 20px 55px rgba(21,30,46,.105)}
  .pixel-card .card-photo img{transition:transform 1.15s var(--polish-ease),filter .7s ease}
  .pixel-card:hover .card-photo img,.pixel-card:focus-within .card-photo img{transform:scale(1.052)}
  .flow-row-inner .flow-title{transition:transform .8s var(--polish-ease),color .4s ease}
  .flow-row:hover .flow-title,.flow-row:focus-visible .flow-title{transform:translateX(12px)}
}
.pixel-card{transition:transform .8s var(--polish-ease),box-shadow .7s var(--polish-ease),border-color .5s ease}
/* One pointer-responsive light wash on the existing blue section. */
.blue-break::after{background:radial-gradient(ellipse 48% 115% at var(--glow-x,65%) var(--glow-y,45%),rgba(255,255,255,.14),transparent 72%),linear-gradient(90deg,rgba(0,53,165,.17),rgba(7,87,232,.3) 78%);transition:background .1s linear}
/* More tactile button affordances, without movement affecting tap targets. */
.btn,.header-cta,.card-cta,.quote-option span{transition-timing-function:var(--polish-ease)}
.btn:active,.header-cta:active{transform:translateY(0) scale(.985)}
.btn:focus-visible,.header-cta:focus-visible,.card-cta:focus-visible,.work-feature-photo:focus-visible{outline:2px solid #88b6ff;outline-offset:4px}
/* A subtle directional highlight conveys the action, not an infinite shimmer. */
@media(hover:hover) and (pointer:fine){
  .btn-blue,.header-cta{position:relative;overflow:hidden;isolation:isolate}
  .btn-blue::after,.header-cta::after{content:'';position:absolute;inset:-30% auto -30% -80%;width:45%;transform:skewX(-25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transition:left .72s var(--polish-ease);pointer-events:none;z-index:0}
  .btn-blue:hover::after,.header-cta:hover::after{left:140%}
}
/* Featured images are interactive just like the rest of the masonry gallery. */
button.work-feature-photo{display:block;width:100%;padding:0;border:0;text-align:inherit;cursor:zoom-in}
button.work-feature-photo img{pointer-events:none}
button.work-feature-photo:focus-visible{outline-offset:5px}
/* Only animate content that can be safely visible before its first frame. */
@media (prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 .js .hero-atelier .hero-photo::before{animation:none;transform:scaleX(0)}
 .hero-atelier .hero-photo img,.loaded .hero-atelier .hero-photo img{transform:none!important;transition:none!important}
 .intro-portrait img,.work-feature-photo img,.quote-photo img,.detail-photo img{transform:none!important;transition:none!important;will-change:auto}
 .pixel-card,.pixel-card:hover{transform:none!important;transition:none!important}
 .blue-break::after{transition:none!important}
 .btn:active,.header-cta:active{transform:none!important}
 .btn-blue::after,.header-cta::after{display:none!important}
}
@media (max-width:760px){
 .intro-portrait img,.work-feature-photo img,.quote-photo img,.detail-photo img{transform:none!important;will-change:auto}
 .hero-atelier .hero-photo img,.loaded .hero-atelier .hero-photo img{transform:scale(1.015)!important;transition:none!important}
 .scroll-progress{height:2px}
}


/* ================================================================
   V9.8 — DEPLOYMENT RELIABILITY / VISUAL CONTINUITY
   Content is always rendered. Scroll animations cannot hide a section
   after a navigation jump, restoration, or background-tab wake-up.
   ================================================================ */
.js .js-reveal,.js .js-reveal:not(.visible),
.js .v8-enter,.js .v8-enter:not(.v8-visible),
.js .media-reveal,.js .media-reveal:not(.visible),
.js .scroll-words,.js .scroll-words .word,
.js .scroll-words:not(.visible) .word,
.js .masonry-gallery .masonry-tile,
.js .work-head,
.js .quote-intro,
.js .quote-form{
  opacity:1!important;
  visibility:visible!important;
  clip-path:none!important;
}
/* Keep entrances positional only; they must never determine readability. */
.js .js-reveal:not(.visible),.js .v8-enter:not(.v8-visible){transform:translate3d(0,7px,0)}
.js .js-reveal.visible,.js .v8-enter.v8-visible{transform:translate3d(0,0,0)}
/* No hidden first frame when jumping straight to a section. */
:target,.service-detail,.work,.quote,.service-cards-section{scroll-margin-top:96px}
#work .masonry-gallery .masonry-tile,
#work .masonry-gallery .masonry-media,
#work .masonry-gallery .masonry-media img{opacity:1!important;clip-path:none!important;visibility:visible!important}

/* Continuous premium interaction treatments across the whole site. */
.intro-portrait,.detail-photo,.work-feature-photo{border-radius:1px}
.intro-aside p,.detail-copy>p,.work-head p{line-height:1.75}
@media (hover:hover) and (pointer:fine){
  .intro-portrait img,.detail-photo img{transition:transform .85s var(--polish-ease),filter .7s ease}
  .intro-portrait:hover img,.detail-photo:hover img{filter:saturate(.95) contrast(1.03);transform:translate3d(0,var(--depth-drift,0px),0) scale(1.095)}
  .services-nav a{transition:color .2s ease,background-color .24s ease}
  .masonry-tile{transition:border-color .35s ease,box-shadow .45s ease}
  .masonry-tile:hover,.masonry-tile:focus-visible{box-shadow:0 14px 32px rgba(15,22,30,.14)}
  .footer-links a{transition:color .22s ease,opacity .22s ease}
  .footer-links a:hover{color:#74a7ff}
}
/* Professional, clear FAQ interaction without introducing decorative effects. */
.faq details{transition:background-color .3s ease,padding-inline .3s ease}
.faq details[open]{background:rgba(7,87,232,.035);padding-inline:12px}
.faq summary{transition:color .25s ease}
.faq summary:hover,.faq details[open] summary{color:#0757e8}
.faq details p{line-height:1.75}
.faq summary:focus-visible,.services-nav a:focus-visible,.flow-row:focus-visible{
  outline:2px solid #0757e8;outline-offset:3px
}
/* Form validation and readable controls across Safari and narrow devices. */
.quote-panel .quote-form input:not([type="radio"]):focus-visible,
.quote-panel .quote-form textarea:focus-visible{outline:2px solid #86b2ff;outline-offset:1px}
.quote-panel .quote-result[hidden],.mobile-menu[hidden],[hidden]{display:none!important}
@media(max-width:900px){.quote-intro,.quote-panel{min-width:0}}
@media(max-width:640px){
 .services-nav a{padding:16px 8px;line-height:1.35}
 .faq details[open]{padding-inline:8px}
 .quote-panel .quote-form input:not([type="radio"]),
 .quote-panel .quote-form textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .js .js-reveal,.js .v8-enter{transform:none!important;transition:none!important}
 .intro-portrait img,.detail-photo img{transform:none!important;transition:none!important}
 .faq details{transition:none}
}

/* Instant, reliable section navigation. Native long-distance smooth scrolling
   can leave visitors watching blank intermediate sections for several seconds.
   The content and section itself are always displayed immediately. */
html{scroll-behavior:auto!important}