/* Loader, team faces and build stages. Shared by every demo site, set by site.json (brand, version, team, stages). */

/* ---------- The loader: each brand draws its own trade, each version leaves a different way ---------- */
html.loading,html.loading body{overflow:hidden}
.ldr{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--deep);color:#fff;font-family:var(--fh);transition:clip-path 1s cubic-bezier(.76,0,.24,1),transform 1s cubic-bezier(.76,0,.24,1);clip-path:inset(0 0 0 0);will-change:transform,clip-path}
.ldr .in{display:flex;flex-direction:column;align-items:center;gap:22px;position:relative;z-index:2;text-align:center;padding:0 16px}
.ldr .word{font-weight:var(--hw);letter-spacing:-.025em;font-size:clamp(34px,6.4vw,78px);line-height:1;overflow:hidden;padding-bottom:.08em}
.ldr .word span{display:inline-block;transform:translateY(110%);animation:ldUp .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--w,1.5s) + var(--i,0) * .045s)}
.ldr .sub{font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:ldFade .8s forwards;animation-delay:calc(var(--w,1.5s) + .5s)}
.ldr .pct{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(18px,4vw,44px);z-index:2;font:600 clamp(48px,9vw,120px)/.8 var(--fh);letter-spacing:-.04em;font-variant-numeric:tabular-nums;opacity:.92}
.ldr .pct small{font-size:.32em;vertical-align:top;margin-left:4px;opacity:.6}
.ldr .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);z-index:2}
.ldr .bar i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .25s linear}
.ldr .tag{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(22px,4vw,48px);z-index:2;font:500 12px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
@keyframes ldUp{to{transform:none}}
@keyframes ldFade{to{opacity:.75}}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldFill{to{fill-opacity:1}}
@keyframes ldGrow{to{transform:scale(1)}}
@keyframes ldDrop{from{transform:translateY(-110%)}to{transform:none}}
@keyframes ldSpin{to{transform:rotate(360deg)}}
/* exits: v1 lifts away like a sheet, v2 opens from the middle like two doors, v3 closes to a point */
.ldr.v1.out{transform:translateY(-100%)}
.ldr.v2.out{clip-path:inset(0 50% 0 50%)}
.ldr.v3.out{clip-path:circle(0% at 50% 50%)}
.ldr.v3{clip-path:circle(150% at 50% 50%)}
.ldr.gone{display:none}

/* Kirkstall Build: a blueprint draws, then the bricks are laid course by course */
.ldr-builder .grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:40px 40px;opacity:0;animation:ldFade 1s forwards}
.ldr-builder svg .ln{fill:none;stroke:#EEF2F6;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1 1.01;stroke-dashoffset:1.005;animation:ldDraw 1.2s ease-in-out forwards}
.ldr-builder svg .ln.a{stroke:var(--accent);stroke-width:3}
.ldr-builder svg .ln.d{animation-delay:.5s}
.ldr-builder svg .bk{fill:var(--accent);fill-opacity:0;animation:ldFill .18s forwards;animation-delay:calc(.9s + var(--c) * .07s)}
/* Redland Kitchens: oak doors drop in, then part to show the name */
.ldr-kitchens{overflow:hidden}
.ldr-kitchens .slats{position:absolute;inset:0;display:flex;z-index:1}
.ldr-kitchens .slats i{flex:1;background:#9A6935;border-right:2px solid #1E1B18;transform:translateY(-110%);animation:ldDrop .55s cubic-bezier(.3,.7,.2,1) forwards,ldPart .9s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i) * .05s),1.25s}
.ldr-kitchens .slats i:nth-child(odd){background:#8A5D2E}
.ldr-kitchens .slats i::after{content:"";position:absolute;top:50%;width:4px;height:44px;margin-top:-22px;border-radius:4px;background:#2a221b;opacity:.5}
.ldr-kitchens .slats i{position:relative}
.ldr-kitchens .slats i:nth-child(-n+6)::after{right:10px}
.ldr-kitchens .slats i:nth-child(n+7)::after{left:10px}
@keyframes ldPart{from{transform:none}to{transform:translateX(var(--x))}}
.ldr-kitchens .knob{width:46px;height:6px;border-radius:9px;background:var(--accent);opacity:0;animation:ldFade .5s forwards 1.9s}
/* Writtle Gardens: a pencil sketch of a garden, then colour soaks in */
.ldr-gardens svg .s{fill:none;stroke:#FAF9F3;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1.01;stroke-dashoffset:1.005;animation:ldDraw 1.2s ease-out forwards}
.ldr-gardens svg .s2{animation-delay:.3s}
.ldr-gardens svg .s3{animation-delay:.55s}
.ldr-gardens svg .leaf{fill:#6E9B63;fill-opacity:0;animation:ldDraw 1.2s ease-out forwards .55s,ldFill .6s forwards 1.2s}
.ldr-gardens svg .sun{fill:var(--accent);transform:scale(0);transform-origin:150px 40px;animation:ldGrow .7s cubic-bezier(.3,1.6,.5,1) forwards .9s}
.ldr-gardens .word{font-style:italic}
@media (prefers-reduced-motion:reduce){.ldr{display:none}}

/* ---------- The team: real faces ---------- */
.team .team-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.team .team-head p{color:var(--muted);max-width:44ch}
.team .eyebrow{font:600 13px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.tm{margin:0}
.tm .ph{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;background:var(--line)}
.tm img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(1) contrast(1.05);transform:scale(1.15);transition:filter 1.2s var(--ease),transform 1.6s var(--ease)}
.tm figcaption{padding-top:16px;display:grid;gap:2px}
.tm b{font:var(--hw) 1.2rem/1.2 var(--fh)}
.tm .role{font-size:14px;color:var(--accent);font-weight:600}
.tm .line{font-size:15px;color:var(--muted);line-height:1.45;margin-top:6px}
.tm .rule{display:block;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .4s;margin-top:12px;width:40px}
.tm.in img{filter:none;transform:scale(1)}
.tm.in .rule{transform:scaleX(1)}
.tm:hover img{transform:scale(1.04)}
/* v1: each face opens upward like a blind */
.team.v1 .tm .ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease)}
.team.v1 .tm.in .ph{clip-path:inset(0 0 0 0)}
.team.v1 .tm figcaption{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s var(--ease);transition-delay:.35s}
.team.v1 .tm.in figcaption{opacity:1;transform:none}
.team{overflow:clip}
/* v2: cards come in from the sides, alternate */
.team.v2 .tm{opacity:0;transform:translateX(-80px) rotate(-3deg);transition:opacity .9s,transform 1.1s var(--ease)}
.team.v2 .tm:nth-child(even){transform:translateX(80px) rotate(3deg)}
.team.v2 .tm.in{opacity:1;transform:none}
/* v3: cards turn over to show the face */
.team.v3 .team-grid{perspective:1400px}
.team.v3 .tm{opacity:0;transform:rotateY(-80deg);transform-origin:left center;transition:opacity .6s,transform 1.2s var(--ease)}
.team.v3 .tm.in{opacity:1;transform:none}
.tm{transition-delay:calc(var(--k,0) * .12s)!important}
.tm .ph,.tm figcaption{transition-delay:calc(var(--k,0) * .12s)}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}.team .team-head{grid-template-columns:1fr}}
@media (max-width:520px){.tm b{font-size:1.05rem}.tm .line{display:none}}
@media (prefers-reduced-motion:reduce){.tm,.tm .ph,.tm img,.tm figcaption{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important;filter:none!important}}

/* ---------- Build stages over the hero, from the reels: the stage name changes as it builds ---------- */
.stg{position:absolute;left:clamp(16px,3vw,40px);top:calc(var(--bar) + 18px);z-index:6;display:flex;align-items:center;gap:12px;color:#fff;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.stg .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);font-size:11px;letter-spacing:0}
.stg .nm{display:block;height:1.2em;overflow:hidden;min-width:16ch}
.stg .nm span{display:block;transition:transform .5s var(--ease)}
.stg .ticks{display:flex;gap:4px}
.stg .ticks i{width:18px;height:3px;background:rgba(255,255,255,.3);border-radius:2px;transition:background .4s}
.stg .ticks i.on{background:var(--accent)}
body.light-hero .stg{color:var(--ink);text-shadow:none}
body.light-hero .stg .n{border-color:var(--ink)}
body.light-hero .stg .ticks i{background:var(--line)}
@media (max-width:640px){.stg{gap:8px;letter-spacing:.12em}.stg .ticks i{width:12px}}

/* no sideways wobble on phones (the -2 versions spilled 90px before) */
html{overflow-x:clip}