/* "What I build" — the three previews come alive while they are on screen (services-live.js adds .is-live).
   Without .is-live (or with reduce motion) every preview simply shows its finished state. */
.services-heading h2 span{color:inherit}.services-heading h2>span:not(.km-w){color:#d9864e}
.service-showcase{position:relative}
.service-showcase::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#efb08400,#efb084aa 40%,#efb08400 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.service-showcase:hover::before{opacity:1}
.service-preview{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
.service-showcase:hover .service-preview{transform:scale(1.015);border-color:#7a5a43}
.service-number{display:inline-flex;align-items:center;gap:10px}
.service-number::after{content:"";width:28px;height:1px;background:#d9864e88}
/* benefits as check pills */
.service-benefits{gap:8px;font-size:13px}
.service-benefits span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:20px;border:1px solid #4d3d31;background:#271e16}
.service-benefits span::before,.service-benefits span+span::before{content:"";display:block;width:12px;height:12px;margin:0;border-radius:0;flex:none;background:#d9864e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 01 website ---------- */
.preview-browser-bar b{display:flex;align-items:center;justify-content:center;height:16px;width:44%;font:500 8px/1 ui-monospace,Menlo,Consolas,monospace;color:#cdbfb2;overflow:hidden;white-space:nowrap}
.pv-url{display:inline-block}
.preview-web-body figure{position:relative;overflow:hidden}
.pv-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 48%,transparent 62%);transform:translateX(-120%)}
.service-preview-web{position:relative}
.pv-cursor{position:absolute;left:31%;top:63%;width:14px;height:14px;opacity:0;pointer-events:none;background:#fff;clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,66% 92%,45% 66%,82% 64%);filter:drop-shadow(0 1px 2px #0009)}
.is-live .pv-url{animation:pv-type 8s steps(19,end) infinite}
.is-live .pv-shine{animation:pv-shine 8s ease-in-out infinite}
.is-live .preview-web-body strong,.is-live .preview-web-body em{animation:pv-in 8s cubic-bezier(.2,.8,.2,1) infinite}
.is-live .preview-web-body em{animation-name:pv-line}
.is-live .preview-web-cards i{animation:pv-card 8s cubic-bezier(.2,.8,.2,1) infinite}
.is-live .preview-web-cards i:nth-child(2){animation-delay:.12s}.is-live .preview-web-cards i:nth-child(3){animation-delay:.24s}
.is-live .pv-cursor{animation:pv-cursor 8s cubic-bezier(.5,0,.3,1) infinite}
.is-live .preview-web-body button{animation:pv-press 8s ease infinite}
@keyframes pv-type{0%,4%{clip-path:inset(0 100% 0 0)}20%,100%{clip-path:inset(0 0 0 0)}}
@keyframes pv-in{0%,8%{opacity:0;transform:translateY(8px)}18%,100%{opacity:1;transform:none}}
@keyframes pv-line{0%,12%{opacity:0;transform:scaleX(0);transform-origin:left}24%,100%{opacity:1;transform:none}}
@keyframes pv-card{0%,20%{opacity:0;transform:translateY(10px)}30%,100%{opacity:1;transform:none}}
@keyframes pv-shine{0%,34%{transform:translateX(-120%)}46%,100%{transform:translateX(120%)}}
@keyframes pv-cursor{0%,46%{opacity:0;transform:translate(150px,60px)}50%{opacity:1;transform:translate(150px,60px)}62%{opacity:1;transform:translate(0,0)}66%{transform:translate(0,0) scale(.85)}70%{transform:translate(0,0) scale(1);opacity:1}84%,100%{opacity:0;transform:translate(0,0)}}
@keyframes pv-press{0%,64%{transform:none;box-shadow:none}66%{transform:scale(.92)}70%{transform:none;box-shadow:0 0 0 5px #d9864e40,0 0 18px #d9864e88}84%,100%{box-shadow:none}}

/* ---------- 02 booking ---------- */
.service-preview-booking .calendar-days i::after{content:none!important}
.service-preview-booking .calendar-days i{position:relative;width:23px;height:23px;margin:-2px auto;border-radius:50%;color:#d8cdc2}
.service-preview-booking .calendar-days .booked{color:#6e5e51;text-decoration:line-through}
.service-preview-booking .calendar-days .selected{background:#d9864e;color:#18110b;font-weight:700}
.service-preview-booking .calendar-days .selected::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #d9864e;opacity:0}
.bk-name .bk-ph{display:none}
.bk-btn{position:relative;overflow:hidden;min-height:38px;box-sizing:border-box}
.bk-btn span{display:block}.bk-send{display:none!important}
.is-live .calendar-days .selected{animation:bk-pick 8s cubic-bezier(.3,1.5,.5,1) infinite}
.is-live .calendar-days .selected::before{animation:bk-ring 8s ease-out infinite}
.is-live .bk-date,.is-live .bk-time{animation:bk-row 8s ease infinite}
.is-live .bk-time{animation-delay:.5s}
.is-live .bk-typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:bk-type 8s steps(8,end) infinite}
.is-live .bk-btn{animation:bk-btn 8s ease infinite}
.is-live .bk-send,.is-live .bk-done{position:absolute;inset:0;display:grid!important;place-items:center}
.is-live .bk-send{animation:bk-send 8s ease infinite}
.is-live .bk-done{animation:bk-done 8s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes bk-pick{0%,8%{background:transparent;color:#d8cdc2;transform:scale(1)}12%{background:#d9864e;color:#18110b;transform:scale(1.25)}16%,92%{background:#d9864e;color:#18110b;transform:scale(1)}100%{background:transparent;color:#d8cdc2}}
@keyframes bk-ring{0%,11%{opacity:0;transform:scale(.8)}14%{opacity:1}26%,100%{opacity:0;transform:scale(1.8)}}
@keyframes bk-row{0%,18%{color:#7a6c60}22%,100%{color:#cfc2b6}}
@keyframes bk-type{0%,32%{max-width:0}46%,100%{max-width:60px}}
@keyframes bk-btn{0%,54%{background:#3a2b20}58%,92%{background:#b96f40}100%{background:#3a2b20}}
@keyframes bk-send{0%,52%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes bk-done{0%,55%{opacity:0;transform:translateY(10px) scale(.9)}60%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ---------- 03 admin ---------- */
.preview-admin-nav>strong img{display:block;width:16px;height:18px}
.ad-enq{position:relative}
.ad-dot{position:absolute;right:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#d9864e;box-shadow:0 0 0 3px #d9864e33}
.admin-new{position:relative;overflow:hidden;max-height:70px;background:linear-gradient(90deg,#d9864e1f,transparent 80%)}
.admin-new>i{background:#d9864e!important;color:#18110b!important;font-weight:700}
.ad-badge{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:9px;background:#d9864e;color:#18110b;margin-right:4px}
.is-live .admin-new{animation:ad-new 8s cubic-bezier(.2,.8,.2,1) infinite}
.is-live .ad-badge{animation:ad-badge 8s cubic-bezier(.3,1.6,.5,1) infinite}
.is-live .ad-dot{animation:ad-dot 8s ease infinite}
@keyframes ad-new{0%,12%{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-bottom-color:transparent}22%{max-height:70px;padding-top:14px;padding-bottom:14px;opacity:1;background-color:#d9864e40}40%,90%{max-height:70px;opacity:1;background-color:transparent}100%{max-height:70px;opacity:0}}
@keyframes ad-badge{0%,22%{transform:scale(0)}28%,90%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes ad-dot{0%,20%{transform:scale(0)}24%{transform:scale(1.6)}28%,90%{transform:scale(1)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:reduce){.service-preview,.service-showcase::before{transition:none}}
/* text inside the mock previews stays mock-sized (the card description rule was leaking into them) */
.service-preview p{font-size:10px;min-height:0;line-height:1.4}
@media(max-width:550px){
 .service-preview-booking{grid-template-columns:57% 43%;padding:16px 10px}
 .service-preview-booking .calendar-days i{width:19px;height:19px;font-size:9px;margin:0 auto}
 .service-preview-booking .calendar-week{font-size:9px;margin-bottom:8px}
 .service-preview-booking .calendar-head{margin-bottom:14px}
 .calendar-head strong,.preview-booking-form strong{font-size:12px}
 .preview-booking-form p{padding:9px 0}
 .preview-booking-form .bk-btn{margin-top:12px;min-height:32px;padding:9px 6px;font-size:9px}
}
/* prices */
.service-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.service-meta .service-number{margin:0}
.services-note{margin:22px 0 0;text-align:center;font-size:14px;color:#bfb2a4;min-height:0}
@media(max-width:550px){.service-price{font-size:16px;padding:5px 10px}.services-note{font-size:13px;text-align:left}}

/* ===== v43 — satisfying motion for "What I build" ===== */
/* ambient copper glow drifting behind the cards */
.services-section{position:relative;isolation:isolate}
.services-section::before{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:min(1100px,90vw);height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#d9864e22,#d9864e0a 55%,transparent);filter:blur(10px);pointer-events:none}
.km-mo .services-section::before{animation:sv-glow 14s ease-in-out infinite alternate}
@keyframes sv-glow{from{transform:translate(-58%,-50%) scale(.95)}to{transform:translate(-42%,-46%) scale(1.08)}}
/* the copper words get a hand-drawn underline when the heading appears */
.services-heading h2>span:not(.km-w){position:relative;display:inline-block}
.services-heading h2>span:not(.km-w)::after{content:"";position:absolute;left:2px;right:6%;bottom:.02em;height:.07em;min-height:3px;border-radius:3px;background:linear-gradient(90deg,#d9864e,#f3c29d 60%,#d9864e00);transform-origin:left;transform:scaleX(1)}
.km-mo .services-heading h2>span:not(.km-w)::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.65,0,.25,1) .75s}
.km-mo .services-heading h2.km-in>span:not(.km-w)::after{transform:scaleX(1)}
/* cards rise in with a slight 3D tilt, then follow the mouse */
.km-mo .service-showcase.km-rv:not(.km-in){transform:perspective(1200px) rotateX(14deg) translateY(56px) scale(.97)}
.km-mo .service-showcase.km-rv.km-in{transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1s;transition-delay:var(--d,0ms)}
.km-mo .service-showcase.km-rv.km-done{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .45s}
.km-mo .service-showcase.km-rv.km-done.is-tilting{transition:transform .12s linear,border-color .3s,box-shadow .45s}
.km-mo .service-showcase.km-done:hover{--lift:-6px}
.service-showcase .service-preview{translate:var(--px,0px) var(--py,0px)}
.service-showcase.is-tilting .service-preview{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,translate .12s linear}
/* border light sweeps round once when a card first comes alive */
.service-showcase.is-seen::before{animation:sv-sweep 1.6s cubic-bezier(.4,0,.2,1) .2s both}
.service-showcase.is-seen:hover::before{animation:none;opacity:1}
@keyframes sv-sweep{0%{opacity:1;background-position:160% 0}80%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.service-showcase::before{background-size:260% 100%;background-position:50% 0}
/* price: digits roll like an odometer */
.odo{display:inline-flex;align-items:baseline}
.odo-col{display:inline-block;height:1.15em;line-height:1.15em;overflow:hidden;vertical-align:bottom}
.odo-strip{display:flex;flex-direction:column;transform:translateY(calc(var(--n,0) * -1.15em))}
.odo-strip i{font-style:normal;height:1.15em;line-height:1.15em;text-align:center}
.km-mo .odo-strip{transform:translateY(0)}
.km-mo .is-seen .odo-strip{transform:translateY(calc(var(--n,0) * -1.15em));transition:transform 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(.35s + var(--k,0) * .12s)}
@keyframes sv-glint{to{transform:translateX(120%)}}
/* benefit pills pop in one after another */
.km-mo .service-showcase:not(.is-seen) .service-benefits span{opacity:0;transform:translateY(8px) scale(.9)}
.km-mo .is-seen .service-benefits span{transition:opacity .5s ease,transform .55s cubic-bezier(.3,1.6,.5,1),border-color .25s,background .25s;transition-delay:calc(1.1s + var(--k,0) * .12s)}
.service-benefits span:nth-child(2){--k:1}.service-benefits span:nth-child(3){--k:2}
.km-mo .is-seen .service-benefits span:hover{transition-delay:0s}
.service-benefits span:hover{border-color:#d9864e88;background:#33261b}
.service-number::after{transform-origin:left}
.km-mo .service-showcase:not(.is-seen) .service-number::after{transform:scaleX(0)}
.km-mo .is-seen .service-number::after{transition:transform .8s cubic-bezier(.65,0,.25,1) .5s}
.services-note{opacity:1}
@media(prefers-reduced-motion:reduce){.services-section::before{animation:none}.service-showcase::before{animation:none!important}}
.sv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== v44 — price panel ===== */
.service-pricing{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;margin-top:22px;padding:18px 18px 18px 20px;border-radius:14px;background:radial-gradient(120% 140% at 0% 0%,#d9864e2e,#d9864e0d 55%,#d9864e05);border:1px solid #d9864e4d;transition:border-color .3s,box-shadow .3s}
.service-showcase:hover .service-pricing{border-color:#d9864e99;box-shadow:0 10px 30px #d9864e1a,inset 0 0 0 1px #d9864e22}
.service-pricing::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff1f 48%,transparent 66%);transform:translateX(-120%);pointer-events:none}
.is-seen .service-pricing::after{animation:sv-glint 1.2s ease 2.1s both}
.service-showcase:hover .service-pricing::after{animation:sv-glint 1s ease both}
.sp-amount{display:grid;gap:3px;min-width:0}
.sp-amount small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c9a888}
.service-pricing .service-price{display:block;font-size:clamp(36px,2.8vw,48px);font-weight:600;line-height:1.15;letter-spacing:-.035em;color:#f6d3b4;text-shadow:0 0 28px #d9864e66;font-variant-numeric:tabular-nums}
.sp-inc{font-size:13px;line-height:1.45;color:#cbbbaa}
.sp-cta{flex:none;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:30px;background:#f2eade;color:#201810;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s,box-shadow .25s}
.sp-cta:hover{background:#f1c7a7;transform:translateY(-1px);box-shadow:0 8px 22px #f1c7a733}
.sp-cta span{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}.sp-cta:hover span{transform:translate(2px,-2px)}
.sp-cta:focus-visible{outline:2px solid #edac7d;outline-offset:3px}
.km-mo .service-showcase:not(.is-seen) .service-pricing{opacity:0;transform:translateY(12px)}
.km-mo .is-seen .service-pricing{transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.8,.2,1) .25s,border-color .3s,box-shadow .3s}
/* the chosen service lights up in the form after "Get a quote" */
.need-options label.need.is-picked{animation:sp-picked 1.4s ease}
@keyframes sp-picked{0%{box-shadow:0 0 0 0 #d77b43cc}40%{box-shadow:0 0 0 8px #d77b4300,0 0 0 1px #d77b43}100%{box-shadow:0 0 0 1px #d77b43}}
@media(max-width:1300px) and (min-width:1001px){.service-pricing{flex-direction:column;align-items:flex-start}.sp-cta{align-self:stretch;justify-content:center}}
@media(max-width:550px){.service-pricing{padding:16px}.sp-cta{width:100%;justify-content:center}}
.service-pricing .sp-custom{letter-spacing:-.02em}
.sp-amount .sp-inc{max-width:34ch}
/* same layout in every card: price on top, button at the bottom, panels and buttons aligned across cards */
.service-showcase{display:flex;flex-direction:column}
.service-copy{flex:1;display:flex;flex-direction:column}
.service-pricing{flex:1;flex-direction:column;align-items:stretch;justify-content:flex-start}
.service-pricing .sp-cta{margin-top:auto;align-self:flex-start}
.sp-amount{padding-bottom:16px}
@media(max-width:550px){.service-pricing .sp-cta{align-self:stretch}}
.service-benefits{gap:6px;font-size:12.5px}
.service-benefits span{padding:6px 10px 6px 9px;gap:6px;white-space:nowrap}
.service-benefits span::before,.service-benefits span+span::before{width:11px;height:11px}