/* Glossmith motion system v2
   Content, pricing, typography and section order remain unchanged.
   Motion follows the brand rule: one soft light source, long unhurried sweeps. */
:root{
  --gm-ease:cubic-bezier(.4,0,.2,1);
  --gm-spring:cubic-bezier(.16,1,.3,1);
  --gm-fast:420ms;
  --gm-medium:820ms;
  --gm-slow:1200ms;
  --gm-sweep:5.4s;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Progress and page entrance are injected by JS, so content is never blocked without JS. */
.gm-progress{
  position:fixed;inset:0 auto auto 0;width:100%;height:2px;z-index:10050;
  pointer-events:none;transform:scaleX(0);transform-origin:left center;
  background:#B8FF00;box-shadow:0 0 18px rgba(184,255,0,.42);will-change:transform
}
.gm-page-curtain{
  position:fixed;inset:0;z-index:10040;pointer-events:none;background:#121212;
  transform-origin:top;animation:gm-curtain-out 1.05s var(--gm-spring) .1s both
}
.gm-page-curtain::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#B8FF00;
  box-shadow:0 0 24px rgba(184,255,0,.5)
}
@keyframes gm-curtain-out{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* Navigation: visible arrival plus a slow brand-specular reflection. */
.gm-motion-ready nav{animation:gm-nav-arrive .9s var(--gm-spring) .18s both}
@keyframes gm-nav-arrive{
  from{opacity:0;filter:blur(8px);transform:translateX(-50%) translateY(-22px) scale(.985)}
  to{opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0) scale(1)}
}
nav .logo{position:relative;overflow:hidden}
nav .logo::after{
  content:"";position:absolute;inset:-45% auto -45% -45%;width:34%;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-18deg);animation:gm-logo-sweep var(--gm-sweep) var(--gm-ease) 1.15s infinite
}
@keyframes gm-logo-sweep{0%,58%{left:-48%;opacity:0}64%{opacity:.9}82%{left:118%;opacity:.2}100%{left:118%;opacity:0}}
nav a:not(.logo):not(.nav-book){position:relative}
nav a:not(.logo):not(.nav-book)::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-4px;height:1px;background:#B8FF00;
  transition:left .42s var(--gm-ease),right .42s var(--gm-ease)
}
nav a:not(.logo):not(.nav-book):hover::after{left:0;right:0}

/* Uploaded photography is applied behind existing page heroes; no copy or layout is replaced. */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{
  content:"";position:absolute;inset:-9%;z-index:-2;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(13,13,13,.88) 0%,rgba(13,13,13,.6) 52%,rgba(13,13,13,.22) 100%),var(--gm-hero-photo);
  background-size:cover;background-position:center;opacity:.92;
  transform:scale(1.13);animation:gm-hero-drift 7s var(--gm-ease) .15s both,gm-hero-ambient 16s ease-in-out 7.3s infinite alternate
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.10) 48%,transparent 62%);
  transform:translateX(-135%);animation:gm-hero-sweep 5.6s var(--gm-ease) 1.05s infinite
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1,.page-hero .lede,.page-hero .crumb,.page-hero .eyebrow{
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.9)
}
.page-hero .lede{color:#F5F5F5!important}
.page-hero .crumb,.page-hero .crumb a{color:#D8D8D2!important}
:root[data-theme="light"] .page-hero h1,:root[data-theme="light"] .page-hero .lede,:root[data-theme="light"] .page-hero .crumb,:root[data-theme="light"] .page-hero .eyebrow{
  text-shadow:0 2px 10px rgba(255,255,255,.75),0 1px 3px rgba(255,255,255,.85)
}
:root[data-theme="light"] .page-hero .lede{color:#0D0D0D!important}
:root[data-theme="light"] .page-hero .crumb,:root[data-theme="light"] .page-hero .crumb a{color:#3A3A3A!important}
@keyframes gm-hero-drift{from{transform:scale(1.17) translate3d(2.5%,1.5%,0);filter:blur(4px)}to{transform:scale(1.08) translate3d(0,0,0);filter:blur(0)}}
@keyframes gm-hero-ambient{0%{transform:scale(1.08) translate3d(0,0,0)}50%{transform:scale(1.14) translate3d(-1.6%,1.1%,0)}100%{transform:scale(1.08) translate3d(0,0,0)}}
@keyframes gm-hero-sweep{0%,54%{transform:translateX(-135%);opacity:0}62%{opacity:1}84%{transform:translateX(135%);opacity:.25}100%{transform:translateX(135%);opacity:0}}
:root[data-theme="light"] .page-hero::before{
  background-image:linear-gradient(90deg,rgba(247,247,245,.82) 0%,rgba(247,247,245,.52) 52%,rgba(247,247,245,.16) 100%),var(--gm-hero-photo)
}

/* Strong, readable hero entrance. */
.gm-hero-item{opacity:0;filter:blur(10px);transform:translate3d(0,28px,0);clip-path:inset(0 0 100% 0)}
.gm-motion-ready .gm-hero-item{
  animation:gm-hero-item-in .95s var(--gm-spring) forwards;
  animation-delay:calc(var(--gm-order,0) * 105ms + 260ms)
}
@keyframes gm-hero-item-in{to{opacity:1;filter:blur(0);transform:none;clip-path:inset(0 0 0 0)}}
.gm-word{display:inline-block;white-space:pre;opacity:0;filter:blur(8px);transform:translateY(.72em) rotateX(-18deg);transform-origin:50% 100%}
.gm-motion-ready .gm-word{animation:gm-word-in .82s var(--gm-spring) forwards;animation-delay:calc(var(--gm-word-index,0) * 48ms + 320ms)}
@keyframes gm-word-in{to{opacity:1;filter:blur(0);transform:translateY(0) rotateX(0)}}

/* Scroll reveals are applied to individual UI elements, not just entire sections. */
.gm-reveal{
  opacity:0;filter:blur(10px);transform:translate3d(0,36px,0) scale(.985);
  clip-path:inset(0 0 14% 0 round 3px);will-change:opacity,transform,filter,clip-path
}
.gm-reveal.gm-left{transform:translate3d(-38px,0,0) scale(.985);clip-path:inset(0 10% 0 0 round 3px)}
.gm-reveal.gm-right{transform:translate3d(38px,0,0) scale(.985);clip-path:inset(0 0 0 10% round 3px)}
.gm-reveal.gm-in{
  opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1);clip-path:inset(0 0 0 0 round 3px);
  transition:opacity .82s var(--gm-ease),transform .95s var(--gm-spring),filter .82s var(--gm-ease),clip-path 1.05s var(--gm-ease);
  transition-delay:var(--gm-delay,0ms)
}

/* Existing section dividers animate as if being drawn. */
.sec{position:relative}
.sec::after{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,#B8FF00,rgba(184,255,0,.12),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--gm-ease)
}
.sec.gm-section-in::after{transform:scaleX(1)}

/* Tables and list items receive staggered, production-safe motion. */
.gm-row{opacity:0;transform:translateX(-22px);filter:blur(5px)}
.gm-row.gm-in{opacity:1;transform:none;filter:none;transition:opacity .62s var(--gm-ease),transform .75s var(--gm-spring),filter .62s var(--gm-ease);transition-delay:var(--gm-delay,0ms)}
.gm-list-item{opacity:0;transform:translateX(-16px)}
.gm-list-item.gm-in{opacity:1;transform:none;transition:opacity .58s var(--gm-ease),transform .72s var(--gm-spring);transition-delay:var(--gm-delay,0ms)}

/* Uploaded photos behind existing cards and service tiles. */
.gm-photo-surface{position:relative;overflow:hidden;isolation:isolate}
.gm-photo-surface::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(150deg,rgba(13,13,13,.5),rgba(13,13,13,.8)),var(--gm-card-image);
  background-size:cover;background-position:center;opacity:.72;transform:scale(1.08);
  animation:gm-card-drift 11s ease-in-out infinite alternate;
  transition:opacity .75s var(--gm-ease),filter .75s var(--gm-ease)
}
.gm-photo-surface::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.13) 48%,transparent 65%);
  transform:translateX(-140%);transition:transform 1.2s var(--gm-ease)
}
.gm-photo-surface:hover::before{opacity:.86;filter:saturate(1.08)}
.gm-photo-surface:hover::after{transform:translateX(140%)}
.gm-photo-surface>*{position:relative;z-index:1}
.gm-photo-surface h1,.gm-photo-surface h2,.gm-photo-surface h3,.gm-photo-surface h4,.gm-photo-surface p,.gm-photo-surface li,
.gm-photo-surface .faq-q,.gm-photo-surface .faq-a,.gm-photo-surface .r-t,.gm-photo-surface .r-d,.gm-photo-surface .why-desc,.gm-photo-surface .svc-desc{
  color:#F5F5F5!important;text-shadow:0 2px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9)
}
:root[data-theme="light"] .gm-photo-surface h1,:root[data-theme="light"] .gm-photo-surface h2,:root[data-theme="light"] .gm-photo-surface h3,:root[data-theme="light"] .gm-photo-surface h4,
:root[data-theme="light"] .gm-photo-surface p,:root[data-theme="light"] .gm-photo-surface li,:root[data-theme="light"] .gm-photo-surface .faq-q,:root[data-theme="light"] .gm-photo-surface .faq-a,
:root[data-theme="light"] .gm-photo-surface .r-t,:root[data-theme="light"] .gm-photo-surface .r-d,:root[data-theme="light"] .gm-photo-surface .why-desc,:root[data-theme="light"] .gm-photo-surface .svc-desc{
  color:#0D0D0D!important;text-shadow:0 2px 8px rgba(255,255,255,.7),0 1px 3px rgba(255,255,255,.8)
}
:root[data-theme="light"] .gm-photo-surface::before{
  background-image:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.72)),var(--gm-card-image);opacity:.78
}
:root[data-theme="light"] .svc.gm-photo-card::after{
  background-image:linear-gradient(155deg,rgba(255,255,255,.36),rgba(255,255,255,.68)),var(--gm-card-image);opacity:.8
}

/* Large text-bearing sections (paragraphs, not headings) need brighter text over the photo, not a crushed-down image. */
.gm-photo-section::before{
  background-image:linear-gradient(160deg,rgba(13,13,13,.62),rgba(13,13,13,.82)),var(--gm-card-image)!important;
  opacity:.8!important
}
.gm-photo-section:hover::before{opacity:.86!important}
.gm-photo-section .wrap,.gm-photo-section>*{position:relative;z-index:1}
.gm-photo-section .kp-service-links{color:#D8D8D2!important;text-shadow:0 1px 6px rgba(0,0,0,.8)}
:root[data-theme="light"] .gm-photo-section .kp-service-links{color:#3A3A3A!important;text-shadow:0 1px 6px rgba(255,255,255,.85)}
.gm-photo-section h1,.gm-photo-section h2,.gm-photo-section h3,.gm-photo-section p,.gm-photo-section .eyebrow,.gm-photo-section li{
  color:#F5F5F5!important;text-shadow:0 2px 14px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.9)
}
:root[data-theme="light"] .gm-photo-section::before{
  background-image:linear-gradient(160deg,rgba(247,247,245,.62),rgba(247,247,245,.82)),var(--gm-card-image)!important
}
:root[data-theme="light"] .gm-photo-section h1,:root[data-theme="light"] .gm-photo-section h2,:root[data-theme="light"] .gm-photo-section h3,:root[data-theme="light"] .gm-photo-section p,:root[data-theme="light"] .gm-photo-section .eyebrow,:root[data-theme="light"] .gm-photo-section li{
  color:#0D0D0D!important;text-shadow:0 2px 10px rgba(255,255,255,.7),0 1px 3px rgba(255,255,255,.8)
}

/* Existing images get parallax and a slow specular sweep. */
.gm-media{position:relative;overflow:hidden;isolation:isolate}
.gm-media img{will-change:transform;transform:translate3d(0,var(--gm-parallax,0px),0) scale(1.065);transition:transform 1.05s var(--gm-ease),filter .7s var(--gm-ease)}
.gm-media:hover img{transform:translate3d(0,var(--gm-parallax,0px),0) scale(1.105);filter:saturate(1.05) contrast(1.035)}
.gm-media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 31%,rgba(255,255,255,.13) 48%,transparent 63%);transform:translateX(-140%);transition:transform 1.15s var(--gm-ease);mix-blend-mode:screen}
.gm-media:hover::after{transform:translateX(140%)}

/* Subtle 3D response and magnetic controls. */
.gm-tilt{--gm-rx:0deg;--gm-ry:0deg;--gm-lift:0px;transform:perspective(1100px) rotateX(var(--gm-rx)) rotateY(var(--gm-ry)) translateY(var(--gm-lift));transform-style:preserve-3d;transition:transform .58s var(--gm-spring),box-shadow .55s var(--gm-ease),border-color .35s ease;will-change:transform}
.gm-tilt:hover{--gm-lift:-6px;box-shadow:0 24px 62px rgba(0,0,0,.24)}
.gm-tilt:hover>h2,.gm-tilt:hover>h3,.gm-tilt:hover>.svc-name,.gm-tilt:hover>.r-t{transform:translateZ(18px)}
.gm-magnetic{--gm-mx:0px;--gm-my:0px;transform:translate3d(var(--gm-mx),var(--gm-my),0);transition:transform .42s var(--gm-spring),box-shadow .35s ease,background-color .35s ease,border-color .35s ease;will-change:transform}
.gm-magnetic:active{transform:translate3d(var(--gm-mx),var(--gm-my),0) scale(.96)}

/* A slow light sweep on primary controls follows the supplied brand motion guide. */
.btn,.nav-book,.qb-book,.qb-copy{position:relative;overflow:hidden;isolation:isolate}
.btn::after,.nav-book::after,.qb-book::after,.qb-copy::after{
  content:"";position:absolute;inset:-60% auto -60% -45%;width:28%;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-17deg);
  transition:left 1s var(--gm-ease)
}
.btn:hover::after,.nav-book:hover::after,.qb-book:hover::after,.qb-copy:hover::after{left:125%}

/* Keep the original homepage layout; make already-added service photography visible. */
.svc.gm-photo-card{position:relative;overflow:hidden;isolation:isolate}
.svc.gm-photo-card::after{
  content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(155deg,rgba(13,13,13,.42),rgba(13,13,13,.78)),var(--gm-card-image);
  background-size:cover;background-position:center;opacity:.76;transform:scale(1.07);
  animation:gm-card-drift 12s ease-in-out infinite alternate;
  transition:opacity .75s var(--gm-ease);pointer-events:none
}
.svc.gm-photo-card:hover::after,.svc.gm-photo-card.open::after{opacity:.9}
@keyframes gm-card-drift{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.12) translate3d(-1.2%,1%,0)}100%{transform:scale(1.06) translate3d(0,0,0)}}
.svc.gm-photo-card>*{position:relative;z-index:1}
.svc.gm-photo-card .svc-name{text-shadow:0 2px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9)}
.svc.gm-photo-card .svc-desc,.svc.gm-photo-card .svc-cat,.svc.gm-photo-card .svc-from,.svc.gm-photo-card p,.svc.gm-photo-card h3,.svc.gm-photo-card h4{
  color:#F5F5F5!important;text-shadow:0 2px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.9)
}
:root[data-theme="light"] .svc.gm-photo-card .svc-name{text-shadow:0 2px 8px rgba(255,255,255,.7),0 1px 3px rgba(255,255,255,.8)}
:root[data-theme="light"] .svc.gm-photo-card .svc-desc,:root[data-theme="light"] .svc.gm-photo-card .svc-cat,
:root[data-theme="light"] .svc.gm-photo-card .svc-from,:root[data-theme="light"] .svc.gm-photo-card p,:root[data-theme="light"] .svc.gm-photo-card h3,:root[data-theme="light"] .svc.gm-photo-card h4{
  color:#0D0D0D!important;text-shadow:0 2px 8px rgba(255,255,255,.7),0 1px 3px rgba(255,255,255,.8)
}

/* Focus remains visible and brand-consistent. */
@keyframes gm-focus-pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,255,0,0)}50%{box-shadow:0 0 0 6px rgba(184,255,0,.12)}}
:focus-visible{animation:gm-focus-pulse 1.4s ease 1}

@media(max-width:820px){
  .page-hero::before{inset:-4%;background-position:62% center;opacity:.5}
  .gm-reveal,.gm-reveal.gm-left,.gm-reveal.gm-right{transform:translate3d(0,24px,0) scale(.99)}
  .gm-reveal.gm-in{transform:none}
  .gm-tilt,.gm-tilt:hover{transform:none;box-shadow:none}
  .gm-media img,.gm-media:hover img{transform:scale(1.04)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gm-progress,.gm-page-curtain{display:none!important}
  .gm-motion-ready nav,.page-hero::before,.page-hero::after,nav .logo::after,.gm-photo-surface::before,.svc.gm-photo-card::after{animation:none!important}
  .gm-hero-item,.gm-word,.gm-reveal,.gm-reveal.gm-left,.gm-reveal.gm-right,.gm-row,.gm-list-item{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
  .sec::after{transform:scaleX(1)!important;transition:none!important}
  .gm-media img,.gm-media:hover img,.gm-tilt,.gm-tilt:hover,.gm-magnetic{transform:none!important;transition:none!important}
  .gm-media::after,.gm-photo-surface::after{display:none}
}