/* v29 motion + polish layer. Sits on top of style.css; delete this file and motion.js to go back to v27 look. */


/* ---------- Hero: bigger headline on computers ---------- */
@media(min-width:901px){
  .hero{min-height:min(52vw,850px)}
  .hero-inner{width:62%}
  .hero h1{font-size:clamp(2.8rem,5.3vw,6.6rem);line-height:1.02}
  .lead{max-width:min(36vw,680px);font-size:clamp(1.05rem,1.45vw,1.5rem)}
  .swoosh{width:min(26vw,460px)}
  .hero-logo{width:min(21vw,360px)}
}

/* ---------- Hero entrance (pure CSS, can never leave a blank page) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes artin{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translateY(0) scale(1.03)}50%{transform:translateY(-7px) scale(1.045)}}
@keyframes floatin{from{opacity:0;margin-top:14px}to{opacity:1;margin-top:0}}
.hero-logo,.hero h1,.swoosh,.lead,.hero-actions{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
.hero-logo{animation-delay:.05s}
.hero h1{animation-delay:.2s}
.swoosh{animation-delay:.55s}
.lead{animation-delay:.6s}
.hero-actions{animation-delay:.8s}
.art{animation:artin 1.6s cubic-bezier(.16,1,.3,1) .1s both}
.float{opacity:0;animation:floatin .8s ease-out both,bob2 7s ease-in-out infinite}
.f1{animation-delay:1.0s,1.8s}.f2{animation-delay:1.2s,1.8s}.f3{animation-delay:1.4s,1.8s}
.float{animation-fill-mode:both,none}


/* ---------- Scroll reveals (JS adds data-reveal, so no JS = everything simply shows) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*100ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="map"]{transform:none;opacity:1;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:-webkit-mask-position 2.4s cubic-bezier(.65,0,.2,1),mask-position 2.4s cubic-bezier(.65,0,.2,1)}
.js [data-reveal="map"].in{-webkit-mask-position:0 0;mask-position:0 0}

/* ---------- Depth: fine grain over the whole page + soft gold light in the cream sections ---------- */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");background-size:200px 200px}
.what::before,.about::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 4% 22%,rgba(242,183,58,.20),transparent 30%),radial-gradient(circle at 96% 78%,rgba(242,183,58,.18),transparent 32%)}
.what-curve,.about .what-curve{z-index:1}
.what-inner,.about-inner{position:relative;z-index:2}

/* ---------- Buttons: slow gold shimmer ---------- */
.btn:not(.btn-ghost){position:relative;overflow:hidden}
.btn:not(.btn-ghost)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 5.5s ease-in-out 2.2s infinite;pointer-events:none}
@keyframes shine{0%,70%{left:-60%}100%{left:140%}}
.btn:focus-visible{outline-offset:4px}

/* ---------- Phone: swipe row for projects, sticky button ---------- */
.swipe-hint{display:none}
@media(max-width:640px){
  .swipe-hint{display:block;margin:-6px 0 14px;font-size:.95rem;font-weight:600;letter-spacing:.04em;color:var(--gold-l)}
  .swipe-hint span{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
  @keyframes nudge{50%{transform:translateX(7px)}}
  .work-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:8px 16px 26px;scrollbar-width:none;overscroll-behavior-x:contain}
  .work-cards::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 80vw;max-width:380px;scroll-snap-align:center}
  .pcard:hover{transform:none}
  body{padding-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  .art,.art-pic,.float,.hero-logo,.hero h1,.swoosh,.lead,.hero-actions{animation:none!important;opacity:1!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important;transition:none!important}
  .btn::after{display:none}
}
.about-map img{mix-blend-mode:normal}

.stage{position:absolute;inset:0}
.art-img{display:block}
@media(max-width:900px){
  .stage{inset:auto;left:-21.4%;top:-71.4%;width:146%}
  .art-img{position:static!important;width:100%!important;height:auto!important;left:auto!important;top:auto!important}
}
@media(min-width:901px){.f2{left:83%;top:17%}}

/* Crisp gold line under "built with care." (replaces the thin stretched curve) */
.swoosh{height:5px!important;min-height:0!important;border-radius:5px;background:linear-gradient(90deg,#f6cf6b 0%,#f2b73a 60%,rgba(255,157,63,0) 100%);box-shadow:0 0 16px rgba(242,183,58,.45)}
.swoosh *{display:none}
@media(max-width:900px){.swoosh{background:linear-gradient(90deg,rgba(246,207,107,0),#f6cf6b 25%,#f2b73a 75%,rgba(255,157,63,0))}}

/* About us: matching right-hand line when the section is centred (iPad and phone) */
@media(max-width:900px){.about-eyebrow::after{content:"";width:clamp(36px,4.6vw,84px);height:2px;background:#d99a1c;border-radius:2px}}

/* Phone hero: compact buttons side by side (still 48px tall, easy to tap) */
@media(max-width:900px){
  .hero-actions{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:8px}
  .hero-actions .btn{width:auto;min-height:48px;padding:10px 24px;font-size:.98rem}
}

/* One button size everywhere on phone and iPad (same width, same height) */
@media(max-width:900px){
  .btn,.btn-small,.hero-actions .btn,.foot .foot-cta .btn,.foot-cta .btn,.form-dialog form .btn{
    width:168px;min-width:168px;max-width:100%;min-height:48px;padding:10px 12px;font-size:.98rem
  }
  .top .btn-small{width:auto;min-width:0;max-width:none;padding:8px 16px;min-height:44px;font-size:.9rem}
  .form-dialog form .btn{display:flex;margin-left:auto;margin-right:auto}
}

/* Bolder arrow icon inside the Get in touch buttons */
.btn .arr{width:1.45em;height:1.45em;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* Phone/iPad hero picture: show the whole hand, soft blend into the page colour, chips clear of the screen text */
@media(max-width:900px){
  .art-pic{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);
    mask-composite:intersect}
  .f1{left:3%;top:14%}
  .f2{left:62%;top:2%}
  .f3{left:12%;top:81%}
}

/* Keep phrases together: never break in the middle of a phrase */
h1,h2{text-wrap:balance}
.ph{white-space:nowrap}
@media(max-width:900px){
  #how-h .ph{display:block}
  .what h2 em,.work h2 em,.about h2 em{white-space:nowrap}
}

/* ---------- Phone / iPad: hamburger button on the left, slide-out menu ---------- */
.burger,.scrim,.drawer{display:none}
@media(max-width:900px){
  .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px}
  .top .brand{justify-self:center}
  .top .brand-text,.top .brand .brand-word{display:none}
  .top nav{justify-self:end}
  .top nav a:not(.btn){display:none!important}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:6px;justify-self:start;width:48px;height:48px;padding:0 11px;border:1px solid rgba(242,183,58,.45);border-radius:14px;background:rgba(255,255,255,.06);cursor:pointer}
  .burger span{display:block;height:3px;border-radius:3px;background:#f6cf6b;transition:transform .25s,opacity .2s}
  .burger:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
  .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(3,8,32,.62);opacity:0;transition:opacity .3s}
  .scrim[hidden]{display:none}
  .scrim.show{opacity:1}
  .drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:41;width:min(84vw,330px);padding:20px 22px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#0e1a63,#08103a);border-right:1px solid rgba(242,183,58,.4);box-shadow:12px 0 40px rgba(0,0,0,.5);transform:translateX(-105%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s;overflow-y:auto}
  .drawer.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
  .drawer-head img{width:170px;height:auto}
  .drawer-close{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.06);cursor:pointer}
  .drawer-close svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
  .drawer-nav{display:flex;flex-direction:column;margin:6px 0 28px;border-top:1px solid rgba(255,255,255,.14)}
  .drawer-nav a{display:flex;align-items:center;min-height:60px;padding:0 6px;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;font-size:1.2rem;font-weight:600;text-decoration:none}
  .drawer-nav a:hover,.drawer-nav a:focus-visible{color:var(--gold-l)}
  .drawer .btn{align-self:flex-start}
}

/* No visible seam where a cream section meets the curve of the next one: fade the glow out well before the bottom edge */
.what::before,.about::before{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 82%)
}

/* Seam fix: let each curve overlap the section above by a few pixels instead of being cut at the section edge
   (the cut edge left a faint line at some screen sizes while scrolling) */
.work,.how,.foot{overflow:visible;overflow-x:clip}
.what-curve,.work-curve,.how-curve,.foot-curve{top:-4px;height:calc(clamp(50px,6vw,90px) + 4px)}

/* ---------- Phone: stacked deck of project cards (swipe the top card away, loops forever) ---------- */
.deck-ui{display:none}
@media(max-width:640px){
  .swipe-hint{margin:-6px 0 22px}
  .swipe-hint span{display:none}
  .deck-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
  .deck-count{font-weight:700;letter-spacing:.08em;color:var(--gold-l)}
  .deck-ui .btn{width:168px;min-width:168px}
  .work-cards.deck{display:block;position:relative;overflow:visible;margin:0;padding:0;height:calc(var(--h,480px) + var(--pad,56px));scroll-snap-type:none;user-select:none;-webkit-user-select:none}
  .deck .pcard{position:absolute;left:0;right:0;top:var(--pad,56px);width:auto;max-width:none;flex:none;height:var(--h,480px);
    transform-origin:50% 0;transform:translateY(calc(var(--i,0)*-15px)) scale(calc(1 - var(--i,0)*.055));z-index:calc(10 - var(--i,0));
    transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none;-webkit-tap-highlight-color:transparent}
  .deck .pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#050c33;opacity:calc(var(--i,0)*.2);pointer-events:none}
  .deck .pcard[data-pos="0"]{pointer-events:auto;touch-action:pan-y;cursor:grab}
  .deck .pcard[data-pos="0"]:hover{transform:none}
  .deck .pcard.dragging{transition:none;cursor:grabbing}
  .deck .pcard.fly{transition:transform .38s cubic-bezier(.4,0,.8,.4),opacity .38s;opacity:0}
  .deck .pcard.snap{transition:none}
}

/* ---------- Phone: tighter "How we work" panels (no big empty space under the text) ---------- */
@media(max-width:640px){
  .steps{gap:18px;width:min(420px,100%)}
  .step{grid-template-rows:auto auto}
  .sart{aspect-ratio:16/9}
  .sbody{justify-content:flex-start;padding:calc(var(--b)/2 + 6px) 0 18px}
  .step h3{font-size:1.15rem;margin:.1em .8em .3em}
  .step p{font-size:.95rem;line-height:1.45;margin:0 1.1em}
}

/* Removed: soft gold glow circles floating in the "Our work" section */
.work-bg{display:none}

/* Phone: nothing may be wider than the screen (fixes the page sliding sideways on narrower phones) */
@media(max-width:640px){
  .about-inner>*,.about-text{min-width:0}
  .about h2{font-size:min(1.9rem,6.6vw)}
  .about h2 em{white-space:normal}
  .what h2 em,.work h2 em{white-space:nowrap}
  html,body{max-width:100%;overflow-x:clip}
}

/* Phone / iPad top bar: just the menu button (the logo is right below, and Get in touch is in the hero and the bottom bar) */
@media(max-width:900px){
  .top{display:flex;justify-content:flex-start}
  .top .brand,.top nav{display:none}
}

/* ======== v33 P1: phone first screen = picture first (hand + calendar fill the screen, headline rises over its lower part) ======== */
@media(max-width:640px){
  .hero{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:max(100svh,700px);padding:0 16px 34px;overflow:hidden}
  .hero-inner{display:contents}
  .art{position:absolute;top:0;left:0;width:100%;height:164vw;margin:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none;overflow:visible;order:0}
  .art-pic{position:absolute;inset:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 80%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .stage{inset:auto;left:-25.4%;top:-62.6vw;width:136.4%}
  .hero-logo{position:relative;z-index:3;width:150px;min-width:0;margin:calc(var(--hh) + 6px) auto 0}
  .hero h1{position:relative;z-index:3;margin-top:calc(129vw - 124px)}
  .swoosh,.lead,.hero-actions{position:relative;z-index:3}
  .f1{left:3%;top:24%}
  .f3{left:3%;top:35%;max-width:30%;white-space:normal;line-height:1.2}
  .f2{left:60%;top:23%}
}

/* ======== v34 P2: free up the top on phones - no solid bar, the menu button floats over the picture ======== */
@media(max-width:900px){
  .top{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
  .burger{pointer-events:auto;background:rgba(6,15,64,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(242,183,58,.6);box-shadow:0 6px 18px rgba(0,0,0,.35);margin-top:6px}
}
@media(max-width:640px){
  .hero-logo{margin-top:20px}
  .art{top:-50px}
}

/* ======== v35 P3: phone hero paragraph is two short lines (computer and iPad keep the full sentence) ======== */
.lead-short{display:none}
@media(max-width:640px){
  .lead-long{display:none}
  .lead-short{display:inline}
  .lead{text-wrap:balance;max-width:21em}
}

/* ======== v36 P4: phone proof row under the buttons (replaces the three chips on the picture) ======== */
.proof{display:none}
@media(max-width:640px){
  .float{display:none!important}
  .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:358px;margin:26px auto 0;position:relative;z-index:3;animation:rise 1s cubic-bezier(.16,1,.3,1) .95s both}
  .proof div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 6px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.25);text-align:center}
  .proof b{font-size:1.9rem;line-height:1.05;font-weight:800;color:var(--gold-l)}
  .proof span{font-size:.82rem;font-weight:600;color:#dfe5fb;letter-spacing:.02em;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){.proof{animation:none!important}}

/* ======== v37 P5: slow moving gold glow behind the hero + headline appears word by word ======== */
.hero-glow{position:absolute;inset:-25% -15%;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 22% 70%,rgba(255,170,40,.20),transparent 34%),radial-gradient(circle at 82% 58%,rgba(70,110,255,.30),transparent 42%),radial-gradient(circle at 55% 96%,rgba(255,190,60,.16),transparent 32%);
  filter:blur(10px);animation:heroGlow 16s ease-in-out infinite alternate}
@keyframes heroGlow{to{transform:translate(7%,-5%) scale(1.14) rotate(7deg)}}
@keyframes wordIn{from{opacity:0;transform:translateY(.55em);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1{animation:none}
.hero h1 .w{display:inline-block;animation:wordIn .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.25s + var(--k,0)*.16s)}
.hero h1 .hl.w{display:block}
@media(prefers-reduced-motion:reduce){.hero-glow{animation:none}.hero h1 .w{animation:none!important;opacity:1!important}}

/* ======== v38: no blank/frozen start - the opening plays only once the hero picture is ready ======== */
.js .hero:not(.ready) *{animation-play-state:paused!important}


/* ======== v40: single hero button, premium proof bar, whole phone visible ======== */
.hero-actions{justify-content:center}
@media(min-width:901px){.hero-actions{justify-content:flex-start}}
@media(max-width:640px){
  .proof{grid-template-columns:repeat(3,1fr);gap:0;padding:12px 4px;border-radius:22px;max-width:358px;
    background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(246,207,107,.42);
    box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 30px rgba(246,207,107,.10)}
  .proof>div{position:relative;flex-direction:row;gap:8px;padding:2px 4px;border:0;border-radius:0;background:none;box-shadow:none;justify-content:center;text-align:left}
  .proof>div+div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(246,207,107,.35)}
  .proof svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--gold-l);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .proof .t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
  .proof .t b{font-size:1.4rem;font-weight:800;color:var(--gold-l)}
  .proof .t span{font-size:.72rem;font-weight:600;color:#dfe5fb;letter-spacing:.02em;line-height:1.15}
}
@media(max-width:640px){
  .proof{grid-template-columns:.85fr .95fr 1.3fr}
  .proof .t span{white-space:nowrap}
  .proof .t b{white-space:nowrap}
  .proof>div{gap:6px;padding:2px 2px}
  .proof svg{width:24px;height:24px}
}

/* Phone hero order: pill first, Get in touch button underneath */
@media(max-width:640px){
  .proof{animation-delay:.8s;margin:18px auto 0}
  .hero-actions{animation-delay:.95s;margin:22px 0 0}
}

/* Proof pill: bigger icons, numbers centred over their words */
@media(max-width:640px){
  .proof svg{width:30px;height:30px;stroke-width:1.6}
  .proof .t{align-items:center;text-align:center}
  .proof>div{gap:5px}
}

/* About map: pulsing connection points */
.about-map{position:relative}
.about-map .mpulse{position:absolute;width:0;height:0;pointer-events:none}
.about-map .mpulse::before,.about-map .mpulse::after{content:"";position:absolute;left:0;top:0;width:clamp(22px,3.6vw,50px);aspect-ratio:1;margin:calc(clamp(22px,3.6vw,50px)/-2) 0 0 calc(clamp(22px,3.6vw,50px)/-2);border-radius:50%;border:2px solid #f2b73a;box-shadow:0 0 14px rgba(242,183,58,.7);opacity:0;transform:scale(.2);animation:mapPulse 3s ease-out infinite;animation-delay:var(--d,0s)}
.about-map .mpulse::after{animation-delay:calc(var(--d,0s) + 1.5s)}
.about-map .mpulse.hub::before,.about-map .mpulse.hub::after{width:clamp(30px,5vw,70px);margin:calc(clamp(30px,5vw,70px)/-2) 0 0 calc(clamp(30px,5vw,70px)/-2)}
@keyframes mapPulse{0%{opacity:0;transform:scale(.2)}12%{opacity:.95}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.about-map .mpulse{display:none}}

/* Phone headline sized so "countdown calendars," stays on one line */
@media(max-width:640px){.hero h1{font-size:clamp(1.7rem,8.1vw,3.4rem)}}

/* Desktop and wide tablet headline: smaller so "countdown calendars," stays clear of the hand */
@media(min-width:901px){.hero h1{font-size:clamp(2.4rem,4.4vw,5.6rem)}}

/* ======================================================================
   v48 changes (numbers match William's change list)
   ====================================================================== */

/* 3: desktop has no big logo above the headline (the top bar logo stays) */
@media(min-width:901px){.hero-logo{display:none}}

/* 6: live countdown drawn over the phone screen (the numbers in the picture were removed) */
.stage{container-type:inline-size}
.cd{position:absolute;inset:0;pointer-events:none}
.cdn{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));font:700 var(--fs,3cqw)/1 "Times New Roman",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:#f3d98e;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
/* tall picture (phone and iPad) */
.cdn{--fs:3cqw;--r:-.3deg}
.cdn[data-u="d"]{left:46.48%;top:69.92%}
.cdn[data-u="h"]{left:52.31%;top:69.88%}
.cdn[data-u="m"]{left:58.11%;top:69.84%}
.cdn[data-u="s"]{left:63.96%;top:69.77%}
/* wide picture (desktop) */
@media(min-width:901px){
  .cdn{--fs:1.8cqw;--r:1.9deg}
  .cdn[data-u="d"]{left:67.43%;top:51.75%}
  .cdn[data-u="h"]{left:71.11%;top:51.89%}
  .cdn[data-u="m"]{left:74.88%;top:52.21%}
  .cdn[data-u="s"]{left:78.65%;top:52.42%}
}

/* 7: the Christmas app badge and pill link to the 25 Days calendar */
a.float{text-decoration:none;color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
a.float:hover{background:rgba(30,50,150,.8);border-color:rgba(246,207,107,.8)}
.proof-link{position:absolute;inset:0;border-radius:18px}
.proof-link:focus-visible,a.float:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}

/* 1 and 2: form note and fully-booked message */
.dlg-foot{margin:16px 0 0;font-size:.92rem;line-height:1.45;color:#c9d2f4;text-align:center}
.dlg-sub.booked{padding:12px 14px;border:1px solid rgba(242,183,58,.6);background:rgba(242,183,58,.12);border-radius:12px;color:#fff;font-weight:600}

/* 15: Demo label on the rewards card */
.pdemo{position:absolute;top:14px;right:14px;z-index:3;padding:.4em .95em;border-radius:999px;background:#0a143a;color:#f6cf6b;border:1px solid #f2b73a;font:700 .78rem Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.35)}

/* 16: phone shows all four projects in a short stacked list (no swiping) */
@media(max-width:640px){
  .work-cards{display:grid;grid-template-columns:1fr;gap:16px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .pcard{flex:none;max-width:none;scroll-snap-align:none}
  .pimg{aspect-ratio:2.3}
  .pcard h3{font-size:1.12rem;margin:.75em 1em .35em}
  .pcard p{font-size:.9rem;line-height:1.5;margin:0 1.2em 1em}
  .pcard .plink{margin-bottom:6px}
}

/* 20: How we work without the photos: badge, title and a short line */
.step{display:flex;flex-direction:column;align-items:center;grid-template-rows:none;padding:30px 20px 26px}
.sbody{padding:0;justify-content:flex-start}
.sbody .sbadge{position:relative;left:auto;top:auto;transform:none;margin:0 auto 14px}
.step h3{margin:0 0 .4em}
.step p{margin:0}
@media(max-width:640px){
  .steps{gap:12px}
  .step{padding:16px 18px;align-items:stretch}
  .sbody{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;text-align:left;padding:0}
  .sbody .sbadge{grid-row:1/3;width:56px;height:56px;margin:0}
  .step h3{margin:0 0 .2em;font-size:1.1rem}
  .step p{margin:0;font-size:.92rem;line-height:1.4}
}

/* 8: phone hero picture about a fifth smaller so Get in touch sits on the first screen */
@media(max-width:640px){
  .stage{left:-10.3%;top:-43.3vw;width:109.1%}
  .art{height:150vw}
  .hero h1{margin-top:calc(113vw - 124px)}
}

/* v57: from 1 December the countdown is replaced by "Day N is open" */
.cdopen{position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.4em;transform:translate(-50%,-50%) rotate(var(--r,0deg));left:55%;top:69.1%;width:26%;height:6.1%;border-radius:9% / 18%;background:linear-gradient(180deg,#16205f,#101a52);box-shadow:0 0 0 1px rgba(243,217,142,.55),0 0 1.4cqw rgba(243,217,142,.25);color:#f3d98e;font-family:"Times New Roman",Georgia,serif;text-align:center}
.cdopen[hidden]{display:none}
.cdopen b{font-size:3.1cqw;line-height:1;font-weight:700;font-style:normal}
.cdopen b i{font-style:normal}
.cdopen span{font-size:2.4cqw;line-height:1;font-style:italic;color:#fff}
.cd-open .cdn{display:none}
@media(min-width:901px){
  .cdopen{flex-direction:column;align-items:center;gap:.15em;left:73.2%;top:52%;width:15.4%;height:10.5%;--r:1.9deg}
  .cdopen b{font-size:2.2cqw}
  .cdopen span{font-size:1.4cqw}
}