/* Services page (Oct 2026). Builds on site-theme.css and site-motion.css. */

/* Hero: copy left, framed photo right */
.sv-hero{position:relative;padding:168px 0 96px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 78% 45%,rgba(140,36,48,.22),rgba(15,13,12,0) 70%),var(--ground)}
.sv-hero .pb-split{align-items:center}
.sv-hero h1{margin:0;font-size:clamp(3.2rem,6.4vw,5.8rem);line-height:.98}
.sv-hero h1 .mo-line{display:block;overflow:hidden;padding:0 .2em .26em .12em;margin:0 -.2em -.26em -.12em}
.sv-hero h1 .mo-line>*{display:inline-block}
.sv-lede{margin:30px 0 0;max-width:540px;font-size:19px;line-height:1.65;color:var(--bone-2)}
.sv-hero .pb-actions{margin-top:36px}
.mo-js .sv-hero h1 .mo-line>*{transform:translateY(108%);transition:transform 1.25s var(--mo-ease)}
.mo-js .sv-hero h1 .mo-line:nth-child(2)>*{transition-delay:.16s}
.mo-ready .sv-hero h1 .mo-line>*{transform:none}
.mo-js .sv-hero .pb-eyebrow,.mo-js .sv-lede,.mo-js .sv-hero .pb-actions{opacity:0;transform:translateY(18px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-js .sv-lede{transition-delay:.45s}
.mo-js .sv-hero .pb-actions{transition-delay:.65s}
.mo-ready .sv-hero .pb-eyebrow,.mo-ready .sv-lede,.mo-ready .sv-hero .pb-actions{opacity:1;transform:none}

/* The photo sits in a brass-edged frame and catches a slow spotlight */
.sv-frame{position:relative}
.sv-frame:before{content:"";position:absolute;inset:-14px -14px 14px 14px;border:1px solid var(--brass);opacity:.55;pointer-events:none;transition:transform 1.4s var(--mo-ease) .5s}
.mo-js .sv-frame:not(.is-in):before{transform:translate(-14px,14px);opacity:0}
.sv-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;position:relative}
.sv-frame:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background:radial-gradient(circle 280px at var(--fx,30%) var(--fy,30%),rgba(255,226,180,.18),rgba(255,226,180,0) 70%);
  mix-blend-mode:screen;animation:sv-sweep 9s ease-in-out infinite alternate}
@keyframes sv-sweep{0%{--fx:22%;--fy:28%}100%{--fx:78%;--fy:46%}}
@property --fx{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --fy{syntax:'<percentage>';inherits:false;initial-value:30%}
.sv-tag{position:absolute;right:-12px;bottom:-22px;z-index:2;background:var(--oxblood);color:#FFF8EC;padding:14px 20px;
  font:600 12px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(-2deg)}
.mo-js .sv-frame .sv-tag{opacity:0;transform:rotate(-8deg) translateY(16px);transition:opacity .8s var(--mo-ease) 1.1s,transform .9s var(--mo-ease) 1.1s}
.mo-js .sv-frame.is-in .sv-tag{opacity:1;transform:rotate(-2deg)}

/* Marquee of where Vince plays */
.sv-ticker{overflow:hidden;border-bottom:1px solid var(--rule-soft);padding:22px 0;background:var(--panel)}
.sv-track{display:flex;width:max-content;animation:sv-marquee 64s linear infinite}
.sv-ticker:hover .sv-track{animation-play-state:paused}
.sv-track span{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);white-space:nowrap;padding:0 22px;color:var(--bone-2)}
.sv-track i{font-style:normal;color:var(--brass);align-self:center;font-size:14px}
@keyframes sv-marquee{to{transform:translateX(-50%)}}

/* Service cards: two by two, wide photos */
.sv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.sv-grid .pb-show img{aspect-ratio:16/9}
.sv-grid .pb-show>span{padding:32px 34px 38px}
.sv-more{margin-top:8px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);display:inline-flex;gap:10px;align-items:center}
.sv-more b{color:var(--brass);font-weight:400;transition:transform .3s var(--mo-ease)}
.pb-show:hover .sv-more b{transform:translateX(6px)}

/* How booking works */
.sv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:step}
.sv-step{position:relative;padding:34px 28px 8px 0}
.sv-step:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.sv-step:after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--brass);box-shadow:0 0 14px rgba(194,155,95,.6)}
.mo-js .sv-step:before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--mo-ease);transition-delay:calc(var(--mo-d,0s) + .15s)}
.mo-js .sv-step.is-in:before{transform:scaleX(1)}
.sv-step b{display:block;font-family:var(--display);font-weight:400;font-size:20px;color:var(--brass);margin-bottom:10px}
.sv-step strong{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;margin-bottom:12px}
.sv-step p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}

/* Closing call to action */
.sv-cta{position:relative;overflow:hidden;text-align:center;padding:120px 0 128px;border-top:1px solid var(--rule-soft);
  background:radial-gradient(ellipse 55% 70% at 50% 0,rgba(140,36,48,.28),rgba(15,13,12,0) 70%),var(--panel)}
.sv-cta h2{margin:0 auto;font-size:clamp(3rem,6vw,5rem);line-height:1}
.sv-cta p.sv-sub{margin:22px auto 0;max-width:520px;font-size:18px;line-height:1.65;color:var(--muted)}
.sv-cta .pb-actions{justify-content:center;margin-top:36px}
.sv-cta .pb-call{align-items:center;margin-top:32px}

@media (max-width:900px){
  .sv-hero{padding:128px 0 72px}
  .sv-grid{grid-template-columns:minmax(0,1fr)}
  .sv-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .sv-tag{right:8px}
  .sv-frame:before{inset:-10px -10px 10px 10px}
}
@media (max-width:560px){.sv-steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .sv-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .sv-track .sv-dup{display:none}
  .sv-frame:after{animation:none}
  .mo-js .sv-hero h1 .mo-line>*,.mo-js .sv-hero .pb-eyebrow,.mo-js .sv-lede,.mo-js .sv-hero .pb-actions,.mo-js .sv-frame .sv-tag,.mo-js .sv-frame:before{opacity:1!important;transform:none!important;transition:none!important}
  .mo-js .sv-frame .sv-tag{transform:rotate(-2deg)!important}
  .mo-js .sv-step:before{transform:none!important}
}