/* Royal Detailings draft motion layer. Uses --acc (accent), --ink, --paper, --rad set per style. */
html{scroll-behavior:smooth}

/* Draft banner */
.draft-bar{position:relative;z-index:50;background:#000;color:#fff;font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.08em;text-align:center;padding:8px 16px}
.draft-bar b{color:var(--acc2)}
.draft-bar a{color:#fff;text-decoration:underline}

/* Scroll reveal: only applied when JS adds .rv, so content stays visible without JS */
.rv{opacity:0;transform:translateY(var(--rv-y,22px));transition:opacity var(--rv-t,.7s) cubic-bezier(.2,.7,.2,1),transform var(--rv-t,.7s) cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* Hero headline words */
.hw{display:inline-block;opacity:0;transform:translateY(.45em);animation:hw-in .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hw-in{to{opacity:1;transform:none}}

/* Before / after slider */
.ba{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:var(--rad);user-select:none;touch-action:pan-y;background:#000;box-shadow:var(--ba-shadow,none)}
.ba img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;aspect-ratio:auto!important;border-radius:0!important;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba .ba-knob{position:absolute;top:50%;left:var(--pos,50%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--acc);color:var(--knob-ink,#fff);display:flex;align-items:center;justify-content:center;font:700 16px/1 system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s}
.ba:hover .ba-knob,.ba.drag .ba-knob{transform:scale(1.08)}
.ba .ba-tag{position:absolute;top:12px;padding:5px 10px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff;border-radius:calc(var(--rad) * .6)}
.ba .ba-tag.l{left:12px}.ba .ba-tag.r{right:12px;background:var(--acc);color:var(--knob-ink,#fff)}
.ba{cursor:ew-resize}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba .ba-knob,.ba .ba-line,.ba .ba-tag{pointer-events:none}
.ba-hint{margin:10px 0 0;font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.ba input:focus-visible ~ .ba-knob{outline:3px solid var(--paper);outline-offset:3px}

/* Image hover zoom in work grid */
.zoom{overflow:hidden;border-radius:var(--rad)}
.zoom img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.06)}

/* Primary buttons: lift + shine sweep */
.btn-fx{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,filter .25s!important}
.btn-fx:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--btn-shadow,rgba(0,0,0,.18))}
.btn-fx:active{transform:translateY(0)}
.btn-fx::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-fx:hover::after,.btn-fx:focus-visible::after{animation:shine .8s ease-out 1}
@keyframes shine{from{left:-60%}to{left:130%}}
.btn-glow{}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 var(--glow,rgba(212,175,95,.0))}50%{box-shadow:0 0 0 8px var(--glow,rgba(212,175,95,.25))}}

/* Secondary buttons: underline sweep */
.btn-line{position:relative;transition:background-color .25s,color .25s!important}
.btn-line:hover{background:var(--acc)!important;color:var(--knob-ink,#fff)!important;border-color:var(--acc)!important}

/* Trust ticker (style 4) */
.ticker{overflow:hidden;background:var(--acc);color:var(--knob-ink,#000);white-space:nowrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.ticker div{display:inline-block;padding:12px 0;font:700 14px/1 var(--tick-font,system-ui),sans-serif;letter-spacing:.18em;text-transform:uppercase;animation:tick 28s linear infinite}
.ticker span{padding:0 28px}
@keyframes tick{to{transform:translateX(-50%)}}

/* CTA reassurance line added under Book buttons */
.reassure{margin:10px 0 0;font:500 13px/1.5 system-ui,sans-serif;color:var(--muted);letter-spacing:.02em}
.reassure i{font-style:normal;color:var(--acc-text)}

/* Booking progress */
.bk-prog{position:sticky;top:0;z-index:20;background:var(--paper);padding:12px 0 10px;margin:-6px 0 4px}
.bk-prog .t{display:flex;justify-content:space-between;font:600 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.bk-prog .b{height:6px;background:var(--track,rgba(0,0,0,.08));border-radius:99px;overflow:hidden}
.bk-prog .f{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
form input:focus,form select:focus,form textarea:focus{outline:none!important;border-color:var(--acc)!important;box-shadow:0 0 0 4px var(--focus,rgba(176,138,62,.18))!important;transition:box-shadow .2s,border-color .2s}
.ok-tick{display:inline-block;margin-left:6px;color:var(--acc-text);opacity:0;transform:scale(.4);transition:all .3s}
.ok-tick.on{opacity:1;transform:none}
.draft-note{margin-top:12px;padding:12px 14px;border:1px dashed var(--acc);border-radius:var(--rad);font:500 14px/1.5 system-ui,sans-serif;color:var(--ink);background:var(--paper)}

/* Sticky mobile bar slides in */
.m-sticky.slide{transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.m-sticky.slide.up{transform:none}

@media (max-width:640px){
  .ba .ba-knob{width:42px;height:42px;margin:-21px 0 0 -21px}
}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .hw{animation:none;opacity:1;transform:none}
  .btn-fx::after,.btn-glow,.ticker div{animation:none!important}
  .zoom img,.btn-fx{transition:none!important}
}
.m-hero .reassure{order:6;margin-top:-6px}

/* R-39: pointer on every enabled control */
a[href],button:not(:disabled),select,summary,label[for],label:has(input[type=checkbox]),input[type=checkbox],input[type=radio]{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.7}
/* R-03: 44px tap targets for nav, footer and legal links */
header a,footer a,.m-nav a,a.skip{display:inline-flex;align-items:center;min-height:44px;min-width:44px;box-sizing:border-box}
footer nav a{padding:0 4px}
form input[type=checkbox]{width:24px;height:24px}
/* R-27: booking error message */
.form-msg{margin:12px 0 0;padding:12px 14px;border:1px solid #E0705C;border-radius:var(--rad);background:rgba(224,112,92,.12);color:#F3EFE6;font:500 15px/1.5 system-ui,sans-serif}
.form-msg a{color:#E2C27A}

[hidden]{display:none!important}

/* C-3: three work pairs stay equal size after removing the duplicate pair */
@media (min-width:641px){#work [style*="flex: 1 1 480px"]{flex:1 1 300px!important;max-width:calc(50% - 12px)}}
@media (min-width:1000px){#work [style*="flex: 1 1 480px"]{max-width:calc(33.333% - 16px)}}