/* ZERO FAFF branding & graphic design page: its own moving parts, on top of case.css and location.css.
   Everything here is scoped to this page's sections (.dh, .dp, .pg, .dg-how, .ba, .dg-pf) and every animation name
   starts with dg, so nothing leaks into, or is overridden by, the shared stylesheets.
   The demos are drawn in container units (cqw in the opening, cqh on the stage, cqw inside each square). */

/* the made-up client's logo colour: registered so it can fade from one colour to the next */
@property --lc{syntax:"<color>";inherits:true;initial-value:#1E4F5A}

/* the client's logo and wordmark, wherever they appear */
.hlogo{display:block;width:100%;height:auto;overflow:visible}
.hwm{display:grid;justify-items:center;line-height:.9;color:var(--ink)}
.hwm b{font-weight:900;letter-spacing:.06em}
.hwm em{font-style:normal;font-weight:800;letter-spacing:.28em;font-size:.42em;margin-top:.25em}

/* ===================================================================== the opening: a logo drawn and rolled out */
.dh{--lc:#B18A57;width:112%;max-width:720px;justify-self:end;margin-right:-4%;aspect-ratio:6/5;position:relative;container-type:inline-size}
.dh.on{animation:dglc .6s ease 5s forwards}
@keyframes dglc{to{--lc:#1E4F5A}}
.dh > *{position:absolute;opacity:0}
.dh.on > *{animation:dgin .7s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes dgin{from{opacity:0;transform:translateY(30px) rotate(var(--r0,-3deg)) scale(.95)}to{opacity:1;transform:rotate(var(--r,0deg))}}

/* the artboard */
.dh-board{--r0:-5deg;--r:-2deg;left:0;top:4%;width:63%;border:var(--border);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 #000;overflow:hidden;z-index:1}
.dh-bar{display:flex;align-items:center;gap:1cqw;height:6.4cqw;padding:0 2cqw;border-bottom:2.5px solid var(--ink);background:var(--canvas)}
.dh-bar > i{width:1.7cqw;height:1.7cqw;border:2px solid var(--ink);border-radius:50%}
.dh-bar > i:nth-child(1){background:#C0485A}.dh-bar > i:nth-child(2){background:var(--brass)}.dh-bar > i:nth-child(3){background:var(--moss)}
.dh-bar > span{margin-left:1.2cqw;padding:.4cqw 1.6cqw;border-radius:999px;background:rgba(17,23,27,.08);font-size:1.7cqw;font-weight:800}
.dh-bar .tools{margin-left:auto;display:flex;gap:.8cqw;padding:0;background:none}
.dh-bar .tools b{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border:2px solid var(--ink);border-radius:.8cqw;background:var(--paper);font-size:2cqw;font-weight:900}
.dh-bar .t-pen{background:var(--brass)!important;position:relative}
.dh-bar .t-pen::after{content:"";position:absolute;inset:22%;border-radius:2px;background:var(--ink);clip-path:polygon(50% 0,100% 60%,62% 100%,38% 100%,0 60%)}
.dh-bar .t-sh::after{content:"";width:50%;height:50%;border:2px solid var(--ink);border-radius:50%}
.dh.on .t-pen{animation:dgtool 4s steps(1) .4s forwards}
@keyframes dgtool{0%{background:var(--brass)}60%,100%{background:var(--paper)}}
.dh-canvas{position:relative;aspect-ratio:1/.9;background:var(--paper) radial-gradient(rgba(17,23,27,.13) 1.1px,transparent 1.3px) 0 0/16px 16px}
.dh-art{position:absolute;left:19%;width:62%;top:0;bottom:0;display:grid;justify-items:center;align-content:center;gap:2cqw}
.dh-art .bigw{position:relative;display:block;width:66%}
.dh-art .hlogo{width:100%}
.dh-art .hwm{font-size:6cqw;clip-path:inset(0 100% 0 0)}
.dh.on .dh-art .hwm{animation:dgtype .9s steps(14,end) 3.25s forwards}
@keyframes dgtype{to{clip-path:inset(-10% -2% -10% -2%)}}
/* drawn line by line, then filled */
.hlogo.big .dr,.hlogo.draw .dr{stroke-dasharray:1 1;stroke-dashoffset:1;fill-opacity:0}
.dh.on .hlogo.big .dr{animation:dgdraw .5s linear forwards,dgfill .4s ease 3.2s forwards}
.dh.on .hlogo.big .r1{animation-duration:.6s,.4s;animation-delay:.8s,3.2s}.dh.on .hlogo.big .r2{animation-duration:.5s,.4s;animation-delay:1.4s,3.2s}.dh.on .hlogo.big .cp{animation-duration:.55s,.4s;animation-delay:1.9s,3.25s}.dh.on .hlogo.big .st{animation-duration:.35s,.4s;animation-delay:2.45s,3.25s}.dh.on .hlogo.big .wv{animation-duration:.35s,.4s;animation-delay:2.8s,3.25s}
@keyframes dgdraw{to{stroke-dashoffset:0}}
@keyframes dgfill{to{fill-opacity:1}}
/* the pen tool's anchor points and handles while it draws */
.dh-art .hd{position:absolute;width:1.6cqw;height:1.6cqw;border:2px solid #4C8FB8;background:var(--paper);opacity:0}
.dh-art .hd::before,.dh-art .hd::after{content:"";position:absolute;top:50%;height:2px;width:4cqw;background:#4C8FB8}
.dh-art .hd::before{right:100%}.dh-art .hd::after{left:100%}
.dh-art .h1{left:46%;top:3%}.dh-art .h2{left:89%;top:46%}.dh-art .h3{left:3%;top:46%}
.dh.on .dh-art .hd{animation:dghd 2.5s ease .75s forwards}
.dh.on .dh-art .h2{animation-delay:1s}.dh.on .dh-art .h3{animation-delay:1.25s}
@keyframes dghd{0%{opacity:0;transform:scale(.4)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
/* the pen tool: the script puts its nib on the point being drawn, frame by frame */
.dh-pen{position:absolute;width:4cqw;left:0;top:0;opacity:0;z-index:3;transition:opacity .2s;pointer-events:none}
.dh-pen.on{opacity:1}
/* the swatches, and the pointer that picks one */
.dh-sw{position:absolute;right:4%;top:50%;margin-top:-13cqw;display:grid;gap:1.6cqw;padding:1.4cqw;border:2px solid var(--ink);border-radius:999px;background:var(--canvas);opacity:0;transform:translateX(20px)}
.dh.on .dh-sw{animation:dgslide .45s cubic-bezier(.2,1.4,.4,1) 3.5s forwards}
@keyframes dgslide{to{opacity:1;transform:none}}
.dh-sw i{width:4.4cqw;height:4.4cqw;border:2px solid var(--ink);border-radius:50%;background:var(--c)}
.dh.on .dh-sw .pick{animation:dgpick .4s ease 4.95s forwards}
@keyframes dgpick{to{box-shadow:0 0 0 .8cqw var(--canvas),0 0 0 1.2cqw var(--ink)}}
.dh-canvas .cur{position:absolute;width:3.4cqw;left:96%;top:96%;opacity:0;z-index:4}
.dh.on .dh-canvas .cur{animation:dgcur 1.1s cubic-bezier(.5,0,.25,1) 3.95s forwards}
@keyframes dgcur{0%{opacity:0}25%{opacity:1}80%{left:var(--cx,86%);top:var(--cy,38%);transform:none}90%{transform:scale(.82)}100%{opacity:1;left:var(--cx,86%);top:var(--cy,38%);transform:none}}

/* where it ends up: a business card, a takeaway cup and the hanging shop sign */
.dh-card{--r0:-10deg;--r:-4deg;left:39%;top:70%;width:39%;aspect-ratio:1.75;display:flex;align-items:center;gap:2cqw;padding:0 3cqw;border:var(--border);border-radius:10px;background:var(--canvas);color:var(--ink);box-shadow:7px 7px 0 #000;z-index:2;animation-delay:5.6s!important}
.dh-card .lg{flex:0 0 32%}
.dh-card .tx{display:grid;gap:1.2cqw;justify-items:start}
.dh-card .hwm{font-size:4.2cqw;justify-items:start}
.dh-card small{font-size:1.4cqw;font-weight:700;color:rgba(17,23,27,.6)}
.dh-cup{--r0:10deg;--r:5deg;right:1%;bottom:1%;width:19%;z-index:3;animation-delay:5.85s!important}
.dh-cup > svg{display:block;width:100%;height:auto;filter:drop-shadow(6px 6px 0 #000)}
.dh-cup .lg{position:absolute;left:33%;top:42%;width:34%}
.dh-sign{--r0:0deg;--r:0deg;right:3%;top:0;width:27%;z-index:2;animation-delay:6.1s!important}
.dh-sign .br{display:block;width:100%;height:auto}
.dh-sign .sw{width:84%;margin:-1cqw auto 0;padding:1.2cqw;border:var(--border);border-radius:50%;background:var(--paper);box-shadow:6px 6px 0 #000;transform-origin:50% -20%;animation:dgswing 3s ease-in-out 6.8s infinite}
@keyframes dgswing{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}
.dh-toast{--r0:4deg;--r:-2deg;left:3%;top:85%;display:flex;align-items:center;gap:1.6cqw;padding:1.6cqw 2.4cqw 1.6cqw 1.8cqw;border:var(--border);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 #000;white-space:nowrap;z-index:5;animation-delay:6.6s!important}
.dh-toast .dot{width:2.6cqw;height:2.6cqw;border:2px solid var(--ink);border-radius:50%;background:#8FD18A}
.dh-toast span{display:grid;line-height:1.1}.dh-toast b{font-size:2.3cqw}.dh-toast em{font-style:normal;font-size:1.6cqw;color:rgba(17,23,27,.6)}

/* ===================================================================== what we design: the picker and stage */
.dp-pick-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,2.6vw,34px)}
.dp-pick{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 9px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;font-weight:850;cursor:pointer;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s}
.dp-pick svg{width:28px;height:28px;flex:0 0 auto;overflow:visible}
.dp-pick:hover,.dp-pick:focus-visible{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.dp-pick:hover svg{animation:dgwig .5s ease}
@keyframes dgwig{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.dp-pick.on{background:var(--brass);box-shadow:4px 4px 0 var(--ink)}
.dp-pick .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ink)}
.dp.auto .dp-pick.on .bar{animation:dgbar var(--dwell,7.5s) linear forwards}
@keyframes dgbar{to{width:100%}}
.dp-stage-wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4.5vw,70px);align-items:center}
.dp-copy{display:grid}
.dp-panel{grid-area:1/1}
.dp-panel[hidden]{display:block;visibility:hidden;pointer-events:none}
.dp-panel.on{animation:fade .45s ease}
.dp-panel h3{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(34px,3.4vw,54px);line-height:.98}
.dp-panel p{margin-top:16px;font-size:clamp(18px,1.4vw,21px);line-height:1.45;color:var(--mute)}
.dp-panel .gets{margin-top:20px}
.dp-stage{position:relative;aspect-ratio:16/11;container-type:size;border:var(--border);border-radius:24px;background:var(--stone);color:var(--ink);box-shadow:12px 12px 0 var(--ink);overflow:hidden;transform:rotate(.8deg);
  background-image:radial-gradient(rgba(17,23,27,.12) 1.2px,transparent 1.4px);background-size:22px 22px}
.dp-stage .sc{position:absolute;inset:0;font-size:1.75cqh}
.dp-stage .sc[hidden]{display:none}
/* each demo is laid out in a square in the middle; inside it, cqw means 1% of the square */
.sq{position:absolute;top:4%;width:92cqh;height:92cqh;left:calc(50cqw - 46cqh);container-type:size}
/* the notes beside the square */
.dp-stage .co{position:absolute;z-index:8;max-width:30cqw;padding:1.1cqh 1.8cqh;border:.45cqh solid var(--ink);border-radius:1.6cqh;background:var(--paper);font-size:2.2cqh;font-weight:850;line-height:1.15;box-shadow:.8cqh .8cqh 0 var(--ink);opacity:0;transform:scale(.6) rotate(-4deg)}
.dp-stage .co.ok{background:#D8EFD5}
.dp-stage .co.c-l{right:calc(50cqw + 37cqh)}.dp-stage .co.c-r{left:calc(50cqw + 37cqh)}
.dp-stage .co.c1{top:14%}.dp-stage .co.c2{top:46%}.dp-stage .co.c3{top:72%}
.dp-stage .sc.play .co{animation:dgco .5s cubic-bezier(.3,1.7,.5,1) var(--d,1s) forwards}
@keyframes dgco{to{opacity:1;transform:rotate(-2deg)}}
@keyframes dgpop{to{opacity:1;transform:none}}
@keyframes dgslap{0%{opacity:0;transform:scale(1.5) rotate(-10deg)}100%{opacity:1;transform:rotate(var(--rot,-3deg))}}

/* ---------------------------------------------------- logos: drawn, then shown four ways */
.sc-logos{--d:.6s}
.sc-logos .c2{--d:3.7s}.sc-logos .c3{--d:4.6s}
.sc-logos .sq{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3cqw;padding:2cqw}
.lg-tile{position:relative;display:grid;place-items:center;align-content:center;gap:2cqw;border:.5cqw solid var(--ink);border-radius:4cqw;background:var(--paper);box-shadow:1.4cqw 1.4cqw 0 var(--ink);opacity:0;transform:scale(.7)}
.lg-tile .hlogo{width:46%}
.lg-tile .hwm{font-size:5cqw}
.lg-tile .nm{position:absolute;left:3cqw;top:2.6cqw;padding:.3cqw 1.6cqw;border:.35cqw solid currentColor;border-radius:999px;font-size:2.2cqw;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.lg-tile.t1{--lc:#1E4F5A;opacity:1;transform-origin:0 0;transform:scale(2.06)}
.lg-tile.t1 .hlogo{width:44%}.lg-tile.t1 .hwm{font-size:4.4cqw;clip-path:inset(0 100% 0 0)}
.sc-logos.play .t1 .dr{animation:dgdraw .45s ease forwards,dgfill .35s ease 1.85s forwards}
.sc-logos.play .t1 .r1{animation-delay:.2s,1.85s}.sc-logos.play .t1 .r2{animation-delay:.55s,1.85s}.sc-logos.play .t1 .cp{animation-delay:.85s,1.9s}.sc-logos.play .t1 .st{animation-delay:1.15s,1.9s}.sc-logos.play .t1 .wv{animation-delay:1.4s,1.9s}
.sc-logos.play .t1 .hwm{animation:dgtype .7s steps(14,end) 2s forwards}
.sc-logos.play .t1{animation:dgshrink .65s cubic-bezier(.3,1.1,.4,1) 3s forwards}
@keyframes dgshrink{to{transform:none}}
.lg-tile.t2{background:#1E4F5A;color:var(--canvas)}.lg-tile.t2 .hwm{color:var(--canvas)}
.lg-tile.t3 .hlogo{filter:grayscale(1)}
.lg-tile.t4{gap:3cqw}
.lg-tile .app{display:block;width:22cqw;height:22cqw;padding:2cqw;border:.5cqw solid var(--ink);border-radius:4cqw;background:#1E4F5A;--lc:#B18A57}
.lg-tile .tab{display:flex;align-items:center;gap:1cqw;padding:.8cqw 2cqw .8cqw 1cqw;border:.35cqw solid var(--ink);border-radius:1.4cqw 1.4cqw 0 0;background:var(--canvas);font-size:2cqw;font-weight:800}
.lg-tile .tab i{display:block;width:3.4cqw}
.lg-tile .app .hlogo,.lg-tile .tab .hlogo{width:100%}
.sc-logos.play .t2{animation:dgpop .5s cubic-bezier(.3,1.6,.5,1) 3.35s forwards}
.sc-logos.play .t3{animation:dgpop .5s cubic-bezier(.3,1.6,.5,1) 3.55s forwards}
.sc-logos.play .t4{animation:dgpop .5s cubic-bezier(.3,1.6,.5,1) 3.75s forwards}
.lg-files{position:absolute;left:50%;bottom:-1cqw;display:flex;gap:1.4cqw;translate:-50% 0;z-index:3}
.lg-files b{padding:.8cqw 2.2cqw;border:.4cqw solid var(--ink);border-radius:999px;background:var(--brass);font-size:2.4cqw;font-weight:900;opacity:0;transform:translateY(10px)}
.sc-logos.play .lg-files b{animation:dgpop .4s cubic-bezier(.3,1.6,.5,1) forwards}
.sc-logos.play .lg-files b:nth-child(1){animation-delay:4.2s}.sc-logos.play .lg-files b:nth-child(2){animation-delay:4.35s}.sc-logos.play .lg-files b:nth-child(3){animation-delay:4.5s}.sc-logos.play .lg-files b:nth-child(4){animation-delay:4.65s}

/* ---------------------------------------------------- identity: the brand board fills in */
.sc-identity .c1{--d:.5s}.sc-identity .c2{--d:2.6s}
.id-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2.6cqw;padding:2cqw}
.id-t{position:relative;display:grid;align-content:end;padding:2.6cqw;border:.5cqw solid var(--ink);border-radius:3cqw;background:var(--paper);box-shadow:1cqw 1cqw 0 var(--ink);overflow:hidden;opacity:0;transform:translateY(14px) scale(.9)}
.sc-identity.play .id-t{animation:dgpop .5s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(.3s + var(--i) * .3s)}
.id-t.logo{grid-column:span 2;grid-template-columns:auto 1fr;align-content:center;align-items:center;gap:3cqw;padding:3cqw 4cqw}
.id-t.logo .hlogo{width:16cqw}.id-t.logo .hwm{font-size:6cqw;justify-items:start}
.id-t.sw b{font-family:"Melodrama",serif;font-weight:700;font-size:3.6cqw;line-height:1}
.id-t.sw small{font-size:2.2cqw;font-weight:800;opacity:.8}
.id-t.sw.a{background:#1E4F5A;color:var(--canvas)}.id-t.sw.b{background:var(--brass)}.id-t.sw.c{background:var(--canvas)}
.id-t.type{align-content:space-between;background:var(--canvas)}
.id-t.type b{font-size:12cqw;font-weight:900;line-height:.8}
.id-t.type small{font-size:2cqw;font-weight:800;line-height:1.2;opacity:.7}
.id-t.pat{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:1cqw;padding:2cqw;background:#1E4F5A;color:var(--brass)}
.id-t.pat .motif{width:100%;animation:dgbob 3s ease-in-out infinite alternate}
.id-t.pat .motif:nth-child(2n){animation-delay:-1.5s}
@keyframes dgbob{to{transform:translateY(-1.4cqw)}}
.id-t.photo{background:#BFD7E4;padding:0}
.id-t.photo .sun{position:absolute;right:16%;top:14%;width:26%;aspect-ratio:1;border:.4cqw solid var(--ink);border-radius:50%;background:var(--brass)}
.id-t.photo .mug{position:absolute;left:22%;bottom:-6%;width:46%;height:56%;border:.5cqw solid var(--ink);border-radius:1cqw 1cqw 3cqw 3cqw;background:var(--paper);box-shadow:inset 0 -8cqw 0 #1E4F5A}
.id-t.photo .mug::after{content:"";position:absolute;right:-34%;top:16%;width:30%;height:44%;border:.5cqw solid var(--ink);border-left:0;border-radius:0 50% 50% 0}
.id-t.words{align-content:center;gap:.8cqw;background:var(--canvas)}
.id-t.words b{font-family:"Melodrama",serif;font-weight:700;font-size:4.2cqw;line-height:1}
.id-t.words b:nth-child(2){color:#1E4F5A}.id-t.words b:nth-child(3){color:var(--claret)}
.id-stamp{position:absolute;right:-1cqw;bottom:-1cqw;z-index:3;padding:1.4cqw 2.6cqw;border:.5cqw solid var(--ink);border-radius:999px;background:#D8EFD5;font-size:3cqw;font-weight:900;box-shadow:1cqw 1cqw 0 var(--ink);opacity:0}
.sc-identity.play .id-stamp{animation:dgslap .45s cubic-bezier(.3,1.4,.5,1) 3.4s forwards}

/* ---------------------------------------------------- print: a flyer with crop marks, a card that flips */
.pr-flyer{position:absolute;right:6cqw;top:6cqw;width:50cqw;height:72cqw;transform:rotate(3deg)}
.pr-flyer .pg{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;gap:2.4cqw;padding:5cqw 4cqw;border:.5cqw solid var(--ink);background:var(--canvas);box-shadow:1.4cqw 1.4cqw 0 var(--ink);text-align:center;opacity:0;transform:translateY(20px)}
.sc-print.play .pr-flyer .pg{animation:dgpop .55s cubic-bezier(.3,1.4,.5,1) .2s forwards}
.pr-flyer .lg{width:18cqw}
.pr-flyer b{font-family:"Melodrama",serif;font-weight:700;font-size:6cqw;line-height:.95}
.pr-flyer em{font-style:normal;font-size:2.6cqw;font-weight:700;color:rgba(17,23,27,.65)}
.pr-flyer .mp{display:flex;gap:1.4cqw;margin-top:1cqw}
.pr-flyer .mp i{width:10cqw;height:8cqw;border:.4cqw solid var(--ink);border-radius:1cqw;background:#1E4F5A}
.pr-flyer .mp i:nth-child(2){background:var(--brass)}.pr-flyer .mp i:nth-child(3){background:var(--claret)}
.pr-flyer small{margin-top:auto;font-size:2.2cqw;font-weight:900;letter-spacing:.06em}
.pr-flyer .crop{position:absolute;width:5cqw;height:5cqw;opacity:0}
.pr-flyer .crop::before,.pr-flyer .crop::after{content:"";position:absolute;background:var(--ink)}
.pr-flyer .crop::before{width:100%;height:.35cqw}.pr-flyer .crop::after{width:.35cqw;height:100%}
.pr-flyer .tl{left:-6cqw;top:-6cqw}.pr-flyer .tl::before{bottom:0;left:0}.pr-flyer .tl::after{right:0;top:0}
.pr-flyer .tr{right:-6cqw;top:-6cqw}.pr-flyer .tr::before{bottom:0;right:0}.pr-flyer .tr::after{left:0;top:0}
.pr-flyer .bl{left:-6cqw;bottom:-6cqw}.pr-flyer .bl::before{top:0;left:0}.pr-flyer .bl::after{right:0;bottom:0}
.pr-flyer .br{right:-6cqw;bottom:-6cqw}.pr-flyer .br::before{top:0;right:0}.pr-flyer .br::after{left:0;bottom:0}
.sc-print.play .pr-flyer .crop{animation:dgpop .4s ease 1s forwards}
.pr-card{position:absolute;left:4cqw;top:40cqw;width:44cqw;aspect-ratio:1.75;perspective:120cqw;transform:rotate(-5deg);z-index:2}
.pr-card > div{position:absolute;inset:0;border:.5cqw solid var(--ink);border-radius:1.6cqw;box-shadow:1.2cqw 1.2cqw 0 var(--ink);backface-visibility:hidden;transition:transform .8s cubic-bezier(.4,1.3,.5,1)}
.pr-card .fr{display:flex;align-items:center;justify-content:center;gap:2cqw;background:#1E4F5A;--lc:#B18A57}
.pr-card .fr .hlogo{width:12cqw}.pr-card .fr .hwm{font-size:4.4cqw;color:var(--canvas)}
.pr-card .bk{display:grid;align-content:center;gap:.8cqw;padding:0 4cqw;background:var(--canvas);transform:rotateY(180deg)}
.pr-card .bk b{font-family:"Melodrama",serif;font-weight:700;font-size:4.2cqw;line-height:1}
.pr-card .bk small{font-size:2.2cqw;font-weight:700;color:rgba(17,23,27,.65)}
.pr-card .bk i{height:.6cqw;width:70%;border-radius:4px;background:rgba(17,23,27,.15)}.pr-card .bk i.s{width:46%}
.pr-card{opacity:0}
.sc-print.play .pr-card{animation:dgcardin .55s cubic-bezier(.3,1.4,.5,1) .7s forwards}
@keyframes dgcardin{from{opacity:0;transform:translateY(20px) rotate(-12deg)}to{opacity:1;transform:rotate(-5deg)}}
.sc-print.play .pr-card .fr{animation:dgflipa 5s ease-in-out 1.8s forwards}
.sc-print.play .pr-card .bk{animation:dgflipb 5s ease-in-out 1.8s forwards}
@keyframes dgflipa{0%,10%{transform:none}22%,60%{transform:rotateY(-180deg)}72%,100%{transform:rotateY(-360deg)}}
@keyframes dgflipb{0%,10%{transform:rotateY(180deg)}22%,60%{transform:rotateY(0)}72%,100%{transform:rotateY(-180deg)}}
.pr-stamp{position:absolute;left:2cqw;bottom:6cqw;z-index:3;padding:1.4cqw 2.6cqw;border:.5cqw solid var(--ink);border-radius:999px;background:#D8EFD5;font-size:3cqw;font-weight:900;box-shadow:1cqw 1cqw 0 var(--ink);opacity:0}
.sc-print.play .pr-stamp{animation:dgslap .45s cubic-bezier(.3,1.4,.5,1) 3.3s forwards}

/* ---------------------------------------------------- signs & vans: the fascia lights up, the van is wrapped */
.sc-signs .c1{--d:.8s}.sc-signs .c2{--d:3.6s}
.sg-shop{position:absolute;left:0;width:62cqw;top:20cqw;height:74cqw;border:.5cqw solid var(--ink);border-bottom:0;border-radius:2cqw 2cqw 0 0;background:var(--stone);background-image:repeating-linear-gradient(0deg,transparent 0 5cqw,rgba(17,23,27,.08) 5cqw 5.4cqw)}
.sg-shop .fascia{position:absolute;left:5%;right:5%;top:7%;height:17%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2.6cqw;padding:0 3cqw;border:.5cqw solid var(--ink);border-radius:1.4cqw;background:#1E4F5A;--lc:#B18A57;box-shadow:1cqw 1cqw 0 var(--ink)}
.sg-shop .fascia .lg{width:8cqw}
.sg-shop .fascia b{font-size:4.4cqw;font-weight:900;letter-spacing:.06em;color:var(--canvas);line-height:1;white-space:nowrap}
.sg-shop .fascia .l{justify-self:end}.sg-shop .fascia .r{justify-self:start;font-size:2.8cqw;letter-spacing:.16em}
.sg-shop .fascia > *{opacity:.12}
.sc-signs.play .fascia > *{animation:dgflick 1s steps(1) .7s forwards}
@keyframes dgflick{0%{opacity:.12}10%{opacity:1}20%{opacity:.3}30%{opacity:1}45%{opacity:.5}55%,100%{opacity:1}}
.sg-shop .lamp{position:absolute;top:1%;width:6cqw;height:3cqw;border:.4cqw solid var(--ink);border-radius:0 0 3cqw 3cqw;background:var(--ink)}
.sg-shop .lamp::after{content:"";position:absolute;left:-60%;right:-60%;top:100%;height:12cqw;background:linear-gradient(rgba(246,227,164,.6),transparent);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);opacity:0}
.sg-shop .l1{left:22%}.sg-shop .l2{right:22%}
.sc-signs.play .sg-shop .lamp::after{animation:dgfadein .5s ease 1.5s forwards}
@keyframes dgfadein{to{opacity:1}}
.sg-shop .front{position:absolute;left:5%;right:5%;top:32%;bottom:0;display:grid;grid-template-columns:1fr .6fr 1fr;gap:2cqw}
.sg-shop .win,.sg-shop .door{position:relative;border:.5cqw solid var(--ink);border-bottom:0;border-radius:1cqw 1cqw 0 0;background:#BFD7E4}
.sg-shop .door{background:#1E4F5A;border-radius:6cqw 6cqw 0 0}
.sg-shop .vinyl{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-family:"Melodrama",serif;font-weight:700;font-size:2.8cqw;line-height:1.1;text-align:center;color:var(--canvas);text-shadow:.3cqw .3cqw 0 var(--ink);clip-path:inset(0 100% 0 0)}
.sg-shop .vinyl.dot2 .hlogo{width:10cqw}
.sc-signs.play .vinyl{animation:dgwipe .6s ease 1.8s forwards}.sc-signs.play .w2 .vinyl{animation-delay:2.1s}
@keyframes dgwipe{to{clip-path:inset(0 0 0 0)}}
.sg-van{position:absolute;left:63.5cqw;width:36cqw;bottom:.6cqw;z-index:2}
/* the pavement both stand on */
.sc-signs .sq::after{content:"";position:absolute;left:0;right:0;top:94cqw;height:4cqw;border-top:.5cqw solid var(--ink);background:#B9B1A4;z-index:1}
.sg-van > svg{display:block;width:100%;height:auto;filter:drop-shadow(1.2cqw 1.2cqw 0 rgba(17,23,27,.9))}
.sg-van .wrap{position:absolute;left:14%;right:14%;top:13%;height:58%;display:grid;justify-items:center;align-content:center;gap:.6cqw;border:.4cqw solid var(--ink);border-radius:1cqw;background:#1E4F5A;--lc:#B18A57;clip-path:inset(0 100% 0 0)}
.sg-van .wrap::after{content:"";position:absolute;left:calc(50% - .15cqw);top:0;bottom:0;width:.3cqw;background:rgba(17,23,27,.4);z-index:0}
.sg-van .wrap > *{position:relative;z-index:1}
.sg-van .wrap .lg{width:7cqw}
.sg-van .wrap .hwm{font-size:3.2cqw;color:var(--canvas)}
.sg-van .wrap small{font-size:1.25cqw;font-weight:800;color:var(--canvas);opacity:.85}
.sc-signs.play .sg-van .wrap{animation:dgwipe 1.2s ease-in-out 2.5s forwards}
.sg-van .squeegee{position:absolute;left:14%;top:10%;width:2cqw;height:64%;border:.4cqw solid var(--ink);border-radius:1cqw;background:var(--brass);opacity:0}
.sc-signs.play .squeegee{animation:dgsq 1.2s ease-in-out 2.5s forwards}
@keyframes dgsq{0%{opacity:1;left:14%}90%{opacity:1;left:83%}100%{opacity:0;left:84%}}

/* on wider screens the street spills out past the square on both sides, so the shop can be wide and the van full
   size; the notes sit on the fascia and above the van. Phones keep the street inside the square */
@media (min-width:721px){
  .sg-shop{left:-16cqw;width:80cqw;top:20cqw;height:74cqw}
  .sg-shop .fascia .lg{width:9cqw}
  .sg-shop .fascia b{font-size:5.2cqw}
  .sg-shop .fascia .r{font-size:3.4cqw}
  .sg-shop .vinyl{font-size:3.6cqw}
  .sg-shop .vinyl.dot2 .hlogo{width:13cqw}
  .sg-van{left:65.5cqw;width:56cqw}
  .sg-van .wrap .lg{width:10.5cqw}
  .sg-van .wrap .hwm{font-size:4.8cqw}
  .sg-van .wrap small{font-size:1.8cqw}
  .sc-signs .sq::after{left:-22cqw;right:-26cqw}
  .dp-stage .sc-signs .a1{left:24cqw;top:6cqw;--h:15cqw}
  .dp-stage .sc-signs .a2{left:93.5cqw;top:30cqw;--h:15cqw}
}

/* the annotations: a label on a leader line, pinned to the thing it describes, drawn in like a designer's markup */
.dp-stage .ann{position:absolute;z-index:6;display:grid;justify-items:center;translate:-50% 0;pointer-events:none}
.dp-stage .ann b{padding:.9cqw 2cqw;border:.4cqw solid var(--ink);border-radius:999px;background:var(--paper);font-size:2.2cqw;font-weight:900;white-space:nowrap;box-shadow:.7cqw .7cqw 0 var(--ink);opacity:0;transform:translateY(6px) scale(.85)}
.dp-stage .ann .ln{display:block;width:.4cqw;height:var(--h,10cqw);background:repeating-linear-gradient(var(--ink) 0 1cqw,transparent 1cqw 1.8cqw);transform-origin:50% 100%;transform:scaleY(0)}
.dp-stage .ann .dt{display:block;width:2.4cqw;height:2.4cqw;margin-top:-.4cqw;border:.4cqw solid var(--ink);border-radius:50%;background:var(--brass);box-shadow:0 0 0 .8cqw rgba(177,138,87,.35);transform:scale(0)}
.sc-signs .a1{left:31cqw;top:4cqw;--h:12cqw}
.sc-signs .a2{left:81.5cqw;top:49cqw;--h:12cqw}
.dp-stage .sc.play .ann .dt{animation:dgdot2 .4s cubic-bezier(.3,1.7,.5,1) var(--d) forwards}
.dp-stage .sc.play .ann .ln{animation:dgln .35s ease calc(var(--d) + .2s) forwards}
.dp-stage .sc.play .ann b{animation:dglab .4s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .45s) forwards}
.sc-signs .a1{--d:1.4s}.sc-signs .a2{--d:3.7s}
@keyframes dgdot2{to{transform:none}}
/* pointing up: the dot is on the thing, the label hangs below it */
.dp-stage .ann.dn .ln{transform-origin:50% 0}
.dp-stage .ann.dn .dt{margin:0 0 -.4cqw}
/* print: on the business card's top edge, and on the flyer */
.sc-print .a1{left:24cqw;top:27cqw;--h:7cqw;--d:1.1s}
.sc-print .a2{left:66cqw;top:67cqw;--h:6cqw;--d:2.4s}
/* packaging: on the syrup jar's lid, and on the cup */
.sc-packaging .a1{left:58.5cqw;top:28cqw;--h:7.5cqw;--d:1.5s}
.sc-packaging .a2{left:84.5cqw;top:14cqw;--h:22.5cqw;--d:2.6s}
@keyframes dgln{to{transform:none}}
@keyframes dglab{to{opacity:1;transform:none}}

/* ---------------------------------------------------- social: the profile grid fills with on-brand posts */
.sc-social .c1{--d:.6s}.sc-social .c2{--d:2.6s}
.so{padding:3cqw 4cqw;border:.5cqw solid var(--ink);border-radius:4cqw;background:var(--paper);box-shadow:1.4cqw 1.4cqw 0 var(--ink)}
.so-head{display:flex;align-items:center;gap:3cqw}
.so-head .av{width:10cqw;height:10cqw;padding:1cqw;border:.5cqw solid var(--ink);border-radius:50%;background:var(--canvas);box-shadow:0 0 0 .8cqw var(--paper),0 0 0 1.3cqw var(--brass)}
.so-head .nm{display:grid;line-height:1.1}.so-head .nm b{font-size:3.6cqw}.so-head .nm small{font-size:2.4cqw;color:rgba(17,23,27,.6)}
.so-head .st{margin-left:auto;display:grid;justify-items:end;line-height:1}.so-head .st b{font-size:4.4cqw;font-weight:900}.so-head .st small{font-size:2.2cqw;color:rgba(17,23,27,.6)}
.so-hl{display:flex;justify-content:center;gap:3cqw;margin:2.4cqw 0}
.so-hl i{display:grid;place-items:center;width:8.5cqw;height:8.5cqw;border:.45cqw solid var(--ink);border-radius:50%;background:var(--canvas);box-shadow:0 0 0 .6cqw var(--paper),0 0 0 1cqw rgba(17,23,27,.25);font-style:normal;font-size:1.6cqw;font-weight:900;color:var(--canvas)}
.so-hl i:nth-child(1){background:#1E4F5A}.so-hl i:nth-child(2){background:var(--brass)}.so-hl i:nth-child(3){background:var(--claret)}.so-hl i:nth-child(4){background:var(--moss)}
.so-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;width:72cqw;margin:0 auto}
.so-t{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:2cqw;border:.4cqw solid var(--ink);background:var(--canvas);overflow:hidden;text-align:center;opacity:0;transform:scale(.6)}
.sc-social.play .so-t{animation:dgpop .4s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.6s + var(--i) * .18s)}
.so-t b{font-family:"Melodrama",serif;font-weight:700;font-size:3.2cqw;line-height:1.05}
.so-t.quote{background:#1E4F5A;color:var(--canvas)}
.so-t.offer{background:var(--brass)}.so-t.offer b{font-family:inherit;font-size:4.6cqw;font-weight:900;text-transform:uppercase;line-height:.9}
.so-t.offer2{background:var(--moss);color:var(--canvas)}.so-t.offer2 b{font-family:inherit;font-size:4.6cqw;font-weight:900;text-transform:uppercase;line-height:.9}
.so-t.quote2{background:var(--claret);color:var(--canvas)}
.so-t.logo .hlogo{width:70%}
.so-t.pattern{color:#1E4F5A}.so-t.pattern .motif{width:70%}
.so-t.prod,.so-t.prod2{background:#BFD7E4}
.so-t.prod::before,.so-t.prod2::before{content:"";position:absolute;left:26%;bottom:-8%;width:46%;height:58%;border:.45cqw solid var(--ink);border-radius:.8cqw .8cqw 3cqw 3cqw;background:var(--paper);box-shadow:inset 0 -6cqw 0 #1E4F5A}
.so-t.prod2{background:#E8DCC0}.so-t.prod2::before{box-shadow:inset 0 -6cqw 0 var(--claret)}

/* ---------------------------------------------------- packaging: labels slapped on, then priced */
.pk-shelf{position:absolute;left:2cqw;right:2cqw;top:74cqw;height:4cqw;border:.5cqw solid var(--ink);border-radius:1cqw;background:#9C7748;box-shadow:0 1.4cqw 0 rgba(17,23,27,.25)}
.pk-bag,.pk-jar,.pk-cup{position:absolute;bottom:26cqw}
.pk-bag > svg,.pk-jar > svg,.pk-cup > svg{display:block;width:100%;height:auto;filter:drop-shadow(1cqw 1cqw 0 rgba(17,23,27,.9))}
.pk-bag{left:4cqw;width:38cqw}.pk-jar{left:45cqw;width:27cqw}.pk-cup{right:3cqw;width:25cqw}
.pk-bag .lb,.pk-jar .lb,.pk-cup .lb{position:absolute;display:grid;justify-items:center;align-content:center;gap:.8cqw;text-align:center;opacity:0}
.pk-bag .lb{left:16%;right:16%;top:28%;bottom:16%;border:.45cqw solid var(--ink);border-radius:1.4cqw;background:var(--canvas)}
.pk-bag .lb .lg{width:11cqw}
.pk-bag .lb b{font-family:"Melodrama",serif;font-weight:700;font-size:3.6cqw;line-height:1}
.pk-bag .lb small{font-size:1.9cqw;font-weight:800;color:rgba(17,23,27,.65)}
.pk-jar .lb{left:22%;right:22%;top:46%;bottom:22%;border:.45cqw solid var(--ink);border-radius:1cqw;background:var(--brass)}
.pk-jar .lb b{font-family:"Melodrama",serif;font-weight:700;font-size:2.3cqw;line-height:1}
.pk-jar .lb small{font-size:1.4cqw;font-weight:800}
.pk-cup .lb{left:30%;width:40%;top:40%}
.sc-packaging.play .lb{animation:dgslap .45s cubic-bezier(.3,1.4,.5,1) forwards;--rot:0deg}
.sc-packaging.play .pk-bag .lb{animation-delay:.7s}.sc-packaging.play .pk-jar .lb{animation-delay:1.3s;--rot:-2deg}.sc-packaging.play .pk-cup .lb{animation-delay:1.9s}
.pk-tag{position:absolute;left:14cqw;top:80cqw;padding:.8cqw 2.4cqw;border:.45cqw solid var(--ink);border-radius:.8cqw;background:var(--paper);font-size:3cqw;font-weight:900;transform-origin:50% -60%;opacity:0}
.sc-packaging.play .pk-tag{animation:dgpop .4s ease 2.5s forwards,dgswing 2.6s ease-in-out 2.9s infinite}

/* ===================================================================== the brand playground */
.pg-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.5vw,70px);align-items:start}
.pg-lbl{display:block;margin:0 0 12px;font-size:15px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.pg-in{display:block;width:100%;height:62px;margin-bottom:30px;padding:0 20px;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);font:inherit;font-size:24px;font-weight:800;box-shadow:5px 5px 0 #000}
.pg-in:focus{outline:3px solid var(--blue);outline-offset:3px}
.pg-in[aria-invalid="true"]{border-color:#C0485A;box-shadow:5px 5px 0 #C0485A}
.pg-warn{margin:-20px 0 24px;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:#F2D7DC;color:var(--ink);font-size:15px;font-weight:800}
.pg-warn[hidden]{display:none}
.pg-stys{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}
.pg-sty{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2.5px solid var(--canvas);border-radius:14px;background:transparent;color:var(--canvas);font:inherit;font-size:17px;font-weight:850;cursor:pointer;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.pg-sty .sm{display:grid;place-items:center;width:40px;height:40px;border:2px solid currentColor;border-radius:10px;font-size:22px;line-height:1}
.pg-sty .s-bold{font-weight:900}.pg-sty .s-classic{font-family:"Melodrama",serif;font-weight:700}.pg-sty .s-playful{font-weight:800;transform:rotate(-6deg)}.pg-sty .s-minimal{font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:19px}
.pg-sty:hover,.pg-sty:focus-visible{transform:translate(-1px,-2px);box-shadow:3px 4px 0 #000}
.pg-sty.on{background:var(--brass);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 #000}
.pg-pals{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.pg-pal{display:flex;padding:5px;border:2.5px solid var(--canvas);border-radius:999px;background:transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pg-pal i{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;margin-left:-6px}
.pg-pal i:first-child{margin-left:0;background:var(--a)}.pg-pal i:nth-child(2){background:var(--b)}.pg-pal i:nth-child(3){background:var(--c)}
.pg-pal:hover,.pg-pal:focus-visible{transform:translate(-1px,-2px)}
.pg-pal.on{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass),4px 4px 0 3px #000}
.pg-shuffle{padding:11px 20px;border:2.5px solid var(--ink);border-radius:999px;background:var(--canvas);color:var(--ink);font:inherit;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-shadow:4px 4px 0 #000}
.pg-shuffle:hover{background:var(--brass)}
.pg-shuffle:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
/* the desk the mockups sit on */
.pg-stage{position:relative;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto auto;gap:22px 22px;padding:clamp(18px,2.4vw,30px);border:var(--border);border-radius:24px;background:var(--stone);color:var(--ink);box-shadow:10px 10px 0 #000;
  background-image:radial-gradient(rgba(17,23,27,.1) 1.2px,transparent 1.4px);background-size:20px 20px;container-type:inline-size}
.pg-stage > div{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.pg-stage.bump > div{animation:dgbump .5s cubic-bezier(.3,1.6,.5,1)}
.pg-stage.bump > div:nth-child(2){animation-delay:.05s}.pg-stage.bump > div:nth-child(3){animation-delay:.1s}.pg-stage.bump > div:nth-child(4){animation-delay:.15s}
@keyframes dgbump{40%{transform:scale(.94) rotate(-1deg)}}
.pg-note{grid-column:1/-1;font-size:13.5px;font-weight:700;color:rgba(17,23,27,.6)}
/* the mark and the name, in whichever style is picked */
.pg-mk{flex:0 0 auto;display:grid;place-items:center;width:var(--m,46px);height:var(--m,46px);border:2.5px solid var(--ink);border-radius:50%;background:var(--a);color:var(--c);transition:border-radius .4s,background .4s,transform .4s}
.pg-mk .ini{font-size:calc(var(--m,46px) * .56);line-height:1;font-weight:900}
.pg-nm{font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:.95;transition:color .4s}
.pg-nm .sm{font-size:.74em}
.pg-stage[data-s="classic"] .pg-nm{font-family:"Melodrama",serif;font-weight:700;text-transform:none;letter-spacing:0}
.pg-stage[data-s="classic"] .pg-mk{border-radius:50% 50% 10% 10%;background:var(--c);color:var(--a);border-color:var(--a)}
.pg-stage[data-s="classic"] .pg-mk .ini{font-family:"Melodrama",serif;font-weight:700}
.pg-stage[data-s="playful"] .pg-nm{font-weight:900;letter-spacing:.01em}
.pg-stage[data-s="playful"] .pg-mk{border-radius:42% 58% 52% 48% / 55% 45% 55% 45%;background:var(--b);color:var(--ink);transform:rotate(-8deg)}
.pg-stage[data-s="minimal"] .pg-nm{font-family:Helvetica,Arial,sans-serif;font-weight:500;text-transform:lowercase;letter-spacing:.14em}
.pg-stage[data-s="minimal"] .pg-mk{border-radius:6px;background:transparent;color:var(--a);border-width:2px}
.pg-stage[data-s="minimal"] .pg-mk .ini{font-family:Helvetica,Arial,sans-serif;font-weight:400}
/* the card */
.pg-card{grid-row:1;grid-column:1;aspect-ratio:1.75;display:grid;grid-template-columns:1.1fr 1fr;border:var(--border);border-radius:12px;overflow:hidden;box-shadow:6px 6px 0 #000;transform:rotate(-2deg)}
.pg-card .f{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;background:var(--a);text-align:center;--m:clamp(34px,5cqw,48px)}
.pg-card .f .pg-mk{background:var(--c);color:var(--a)}
.pg-card .f .pg-nm{color:var(--c);font-size:clamp(14px,2.6cqw,22px)}
.pg-stage[data-s="classic"] .pg-card .f .pg-mk{background:var(--a);color:var(--c);border-color:var(--c)}
.pg-stage[data-s="minimal"] .pg-card .f .pg-mk{background:transparent;color:var(--c);border-color:var(--c)}
.pg-stage[data-s="playful"] .pg-card .f .pg-mk{background:var(--b);color:var(--ink)}
.pg-card .k{display:grid;align-content:center;gap:4px;padding:0 14px;background:var(--c)}
.pg-card .k .who{font-size:clamp(13px,2.2cqw,18px);color:var(--a)}
.pg-card .k small{font-size:clamp(9px,1.4cqw,12px);font-weight:700;color:rgba(17,23,27,.65);overflow-wrap:anywhere}
.pg-card .k .ln{display:block;height:3px;width:40%;margin:4px 0;border-radius:3px;background:var(--b)}
/* the shop sign */
.pg-sign{grid-row:2;grid-column:1;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:96px;padding:16px 18px;border:var(--border);border-radius:12px;background:var(--a);box-shadow:6px 6px 0 #000;--m:clamp(38px,6cqw,54px)}
.pg-sign .pg-nm{color:var(--c);font-size:clamp(20px,4.2cqw,38px)}
.pg-sign .pg-mk{background:var(--b);color:var(--ink)}
.pg-stage[data-s="classic"] .pg-sign .pg-mk{background:var(--a);color:var(--b);border-color:var(--b)}
.pg-stage[data-s="minimal"] .pg-sign .pg-mk{background:transparent;color:var(--b);border-color:var(--b)}
.pg-sign .lamp{position:absolute;top:-14px;left:50%;width:46px;height:14px;border:2.5px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;background:var(--ink);translate:-50% 0}
/* the post */
.pg-post{grid-row:1 / span 2;grid-column:2;display:grid;grid-template-rows:auto 1fr auto;border:var(--border);border-radius:14px;background:var(--paper);overflow:hidden;box-shadow:6px 6px 0 #000;transform:rotate(1.5deg)}
.pg-post .hd{display:flex;align-items:center;gap:8px;padding:10px 12px;--m:30px}
.pg-post .hd .ac{font-size:14px}
.pg-post .im{display:grid;align-content:end;gap:8px;min-height:180px;padding:16px;background:var(--a);color:var(--c);border-block:2.5px solid var(--ink);position:relative;overflow:hidden}
.pg-post .im::before{content:"";position:absolute;right:-18%;top:-14%;width:66%;aspect-ratio:1;border:2.5px solid var(--ink);border-radius:50%;background:var(--b)}
.pg-post .big{position:relative;font-family:"Melodrama",serif;font-weight:700;font-size:clamp(30px,6cqw,50px);line-height:.9}
.pg-post .im .pg-nm{position:relative;font-size:clamp(14px,2.4cqw,20px);color:var(--c)}
.pg-post .rw{padding:8px 12px;font-size:16px;letter-spacing:.3em}
/* the cup */
.pg-cup{grid-row:3;grid-column:1 / -1;position:relative;justify-self:center;width:clamp(110px,22cqw,170px);--m:clamp(30px,5cqw,44px)}
.pg-cup svg{display:block;width:100%;height:auto;filter:drop-shadow(6px 6px 0 #000)}
.pg-cup svg path{transition:fill .4s}
.pg-cup .pg-mk{position:absolute;left:50%;top:57%;translate:-50% -50%;background:var(--c);color:var(--a)}
.pg-stage[data-s="playful"] .pg-cup .pg-mk{background:var(--b);color:var(--ink)}
.pg-stage[data-s="minimal"] .pg-cup .pg-mk{background:transparent;color:var(--c);border-color:var(--c)}
.pg-stage[data-s="classic"] .pg-cup .pg-mk{background:var(--a);color:var(--c);border-color:var(--c)}

/* ===================================================================== how we design it: the step icons */
.gi{overflow:visible}
.gi *{transform-box:fill-box;transform-origin:center}
.gi-disc .lens{animation:dgscan 4s ease-in-out infinite}
@keyframes dgscan{0%,100%{transform:translate(-14px,-6px)}50%{transform:none}}
.gi-disc .dots circle{animation:dgdot 1s ease-in-out infinite}.gi-disc .dots circle:nth-child(2){animation-delay:.15s}.gi-disc .dots circle:nth-child(3){animation-delay:.3s}
@keyframes dgdot{50%{transform:translateY(-4px)}}
.gi-mood .ph{animation:dgpin 4s cubic-bezier(.3,1.5,.5,1) infinite}
.gi-mood .b{animation-delay:.2s}.gi-mood .c{animation-delay:.4s}.gi-mood .d{animation-delay:.6s}
@keyframes dgpin{0%{opacity:0;transform:translateY(-10px) rotate(-8deg)}14%,85%{opacity:1;transform:none}100%{opacity:0}}
.gi-mood .pin{animation:dgpinp 4s ease infinite}
@keyframes dgpinp{0%,20%{opacity:0;transform:scale(0)}28%,85%{opacity:1;transform:none}100%{opacity:0}}
.gi-des .cv{stroke-dasharray:100;stroke-dashoffset:100;animation:dgline 3.6s ease infinite}
.gi-des .hd{animation:dghand 3.6s ease infinite}
@keyframes dghand{0%,15%{opacity:0}30%,70%{opacity:1}90%,100%{opacity:0}}
.gi-ref .v1{animation:dgv1 4s ease infinite}
@keyframes dgv1{0%,35%{opacity:1;transform:none}55%,90%{opacity:.4;transform:scale(.92) translateY(4px)}100%{opacity:1;transform:none}}
.gi-ref .v2{animation:dgv2 4s ease infinite}
@keyframes dgv2{0%,35%{transform:none}55%,90%{transform:scale(1.06) translateY(-3px)}100%{transform:none}}
.gi-ref .tick{opacity:0;animation:dgtick 4s cubic-bezier(.3,1.7,.5,1) infinite}
@keyframes dgtick{0%,45%{opacity:0;transform:scale(.3)}55%,90%{opacity:1;transform:none}100%{opacity:0}}
.gi-guide .turn{transform-origin:0% 50%;animation:dgturn 4.4s ease-in-out infinite}
@keyframes dgturn{0%,18%{transform:none;opacity:1}44%,80%{transform:scaleX(-1);opacity:1}90%{transform:scaleX(-1);opacity:0}91%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.gi-guide .pc{animation:dgturnpc 4.4s steps(1) infinite}
@keyframes dgturnpc{0%{opacity:1}31%{opacity:0}91%{opacity:1}}
.gi-roll .it{animation:dgout 3.6s cubic-bezier(.3,1.5,.5,1) infinite}
.gi-roll .b{animation-delay:.15s}.gi-roll .c{animation-delay:.3s}.gi-roll .d{animation-delay:.45s}
@keyframes dgout{0%{opacity:0;transform:scale(.3)}16%,85%{opacity:1;transform:none}100%{opacity:0}}
.gi-yours .spark-g{animation:dgtw 1.6s ease-in-out infinite alternate}
@keyframes dgtw{from{opacity:.4;transform:scale(.7)}to{opacity:1;transform:scale(1.05) rotate(45deg)}}

/* ===================================================================== before & after */
.ba-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.5vw,70px);align-items:center}
.ba-list{list-style:none;display:grid;gap:12px;margin-top:6px}
.ba-list li{position:relative;padding-left:34px;font-size:clamp(17px,1.35vw,20px);line-height:1.4}
.ba-list li::before{content:"✓";position:absolute;left:0;top:2px;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:#B7E5B2;font-size:13px;font-weight:900}
.ba-box{position:relative;aspect-ratio:4/3;border:var(--border);border-radius:22px;overflow:hidden;box-shadow:12px 12px 0 var(--ink);container-type:inline-size;touch-action:pan-y;user-select:none}
.ba-side{position:absolute;inset:0;z-index:0}
.ba-side.before{z-index:1;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
/* the before: everything shouting at once */
.bf{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:2cqw;padding:5cqw;background:linear-gradient(160deg,#FF3B3B,#FFD23B 55%,#3BE0FF);font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",Arial,sans-serif;text-align:center;color:#1A1AFF}
.bf .t1{font-size:7.4cqw;font-weight:700;color:#FF00AA;text-shadow:.4cqw .4cqw 0 #FFF200,.8cqw .8cqw 0 #000;transform:rotate(-3deg)}
.bf .cup{font-size:12cqw;line-height:1}
.bf .t2{font-family:"Brush Script MT","Lucida Handwriting",cursive;font-size:7cqw;font-weight:400;color:#007A00}
.bf .t3{font-size:2.8cqw;color:#000;background:#FFF;padding:.6cqw 1.4cqw}
.bf .t4{font-family:Impact,Arial,sans-serif;font-size:4.4cqw;color:#FF0000;letter-spacing:.05em}
.bf .star{position:absolute;right:4cqw;top:5cqw;display:grid;place-items:center;width:18cqw;height:18cqw;background:#FFF200;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);font-family:Impact,Arial,sans-serif;font-size:2.4cqw;color:#FF0000;transform:rotate(12deg)}
/* the after: one clear message */
.af{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:1.6cqw;padding:5cqw 7cqw;background:var(--canvas);color:var(--ink);text-align:center;--lc:#1E4F5A}
.af .lg{width:13cqw}
.af .hwm{font-size:4.4cqw}
.af .t1{margin-top:2cqw;font-family:"Melodrama",serif;font-weight:700;font-size:9.4cqw;line-height:.92}
.af .t2{font-style:normal;font-size:3cqw;font-weight:700;color:rgba(17,23,27,.7)}
.af .t3{margin-top:2cqw;padding:1.2cqw 3cqw;border:.4cqw solid var(--ink);border-radius:999px;background:#1E4F5A;color:var(--canvas);font-size:2.4cqw;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.af .t4{font-size:2.4cqw;font-weight:800;color:#1E4F5A}
.af::after{content:"";position:absolute;right:-14cqw;bottom:-16cqw;width:40cqw;aspect-ratio:1;border:.5cqw solid var(--ink);border-radius:50%;background:var(--brass);z-index:0}
.af > *{position:relative;z-index:1}
.ba-tag{position:absolute;top:3cqw;z-index:4;padding:.8cqw 2cqw;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);font-size:clamp(12px,2cqw,16px);font-weight:900;text-transform:uppercase;letter-spacing:.05em;box-shadow:3px 3px 0 var(--ink);pointer-events:none}
.ba-tag.l{left:3cqw}.ba-tag.r{right:3cqw;background:var(--brass)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:var(--ink);z-index:5;pointer-events:none}
.ba-knob{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);font-style:normal;font-size:20px;font-weight:900;letter-spacing:-.1em;translate:-50% -50%;box-shadow:4px 4px 0 var(--ink)}
.ba-range{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible + *,.ba-box:focus-within .ba-knob{outline:3px solid var(--blue);outline-offset:3px}

/* ===================================================================== results: Salt & Co */
.dpf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,70px);align-items:center}
.dpf-pic{position:relative;display:block;width:min(100%,460px);justify-self:center;border:var(--border);border-radius:22px;overflow:visible;box-shadow:10px 10px 0 #000;transform:rotate(-1.2deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dpf-pic:hover{transform:rotate(0) translateY(-3px)}
.dpf-pic img{display:block;width:100%;height:auto;border-radius:20px}
.dpf-badge{position:absolute;right:-14px;bottom:-18px;display:grid;max-width:220px;padding:12px 16px;border:var(--border);border-radius:16px;background:var(--brass);color:var(--ink);font-size:14px;font-weight:800;line-height:1.2;box-shadow:5px 5px 0 #000;transform:rotate(3deg)}
.dpf-badge b{font-size:30px;font-weight:900;line-height:1}
.dpf-k{font-size:15px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.dpf-stat{display:flex;align-items:center;gap:18px;margin:14px 0 20px}
.dpf-stat span{display:grid;line-height:1}
.dpf-stat b{font-size:clamp(46px,5vw,76px);font-weight:900;font-variant-numeric:tabular-nums}
.dpf-stat .from b{opacity:.55}
.dpf-stat .to b{color:var(--brass)}
.dpf-stat small{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.dpf-stat .arr{width:70px;flex:0 0 auto;color:var(--brass)}
.dpf-q{margin:0 0 16px;padding-left:20px;border-left:4px solid var(--brass);font-family:"Melodrama",serif;font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.15}
.dpf-q cite{display:block;margin-top:10px;font-family:"Big Shoulders",sans-serif;font-style:normal;font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.dpf-p{margin-bottom:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--mute);max-width:52ch}
.dpf-acts{display:flex;flex-wrap:wrap;gap:12px}

/* ===================================================================== the closing: the character's pencil */
.cta-ch .cta-sub{max-width:56ch;text-wrap:balance}

/* ===================================================================== smaller screens */
@media (max-width:980px){
  .dh{width:100%;max-width:600px;margin:clamp(10px,3vw,30px) auto 0;justify-self:center}
  .dg-hero .scroll-cue{display:none}
}
@media (max-width:1000px){
  .dp-stage-wrap{grid-template-columns:1fr;gap:26px}
  .dp-stage{order:-1}
  .pg-grid,.ba-grid,.dpf-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .dh{max-width:460px;margin:10px auto 0}
  .dh-board{width:66%}
  .dh-card{width:42%;left:36%}.dh-cup{width:21%}.dh-sign{width:29%}
  .dh-toast{left:0;top:86%}
  .dp-pick-row{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1) 22px;padding:4px var(--pad) 10px;scroll-snap-type:x proximity;scrollbar-width:none}
  .dp-pick-row::-webkit-scrollbar{display:none}
  .dp-pick{flex:0 0 auto;scroll-snap-align:start;font-size:15px;padding:8px 15px 8px 9px}.dp-pick svg{width:26px;height:26px}
  .dp-stage{aspect-ratio:1/1.04;transform:none;box-shadow:7px 7px 0 var(--ink);background-size:18px 18px}
  .dp-stage .co{max-width:34cqw;font-size:2cqh;padding:.9cqh 1.4cqh}
  .dp-stage .co.c-l{left:1.5%;right:auto}.dp-stage .co.c-r{right:1.5%;left:auto}
  .dp-stage .co.c1{top:2%}.dp-stage .co.c2{display:none}.dp-stage .co.c3{top:2%}
  .pg-stage{grid-template-columns:1fr 1fr;gap:16px}
  .pg-card{grid-column:1/-1}
  .pg-sign{grid-row:3;grid-column:1/-1}
  .pg-post{grid-row:2;grid-column:1;transform:none}
  .pg-post .im{min-height:130px}
  .pg-cup{grid-row:2;grid-column:2;align-self:center}
  .pg-stys{grid-template-columns:1fr 1fr}
  .dpf-badge{right:8px}
}
/* the notes on packaging sit in the space above the jar and cup, on every screen */

@media (max-width:720px){
  /* phones: the first logo is drawn in its own tile, rather than full size and then shrunk into place */
  .lg-tile.t1{transform:none}
  .sc-logos.play .t1{animation:none}
  /* the print note sits in the top corner, readable, rather than squeezed against the card */
  /* the social note sits on the top corner of the feed */
  .dp-stage .sc-social .co.c1{top:25%;left:auto;right:10%}
}
@media (prefers-reduced-motion:reduce){
  .dh{--lc:#1E4F5A}
  .dh > *,.dh *{animation:none!important}
  .dh > *{opacity:1!important;transform:rotate(var(--r,0deg))!important}
  .dh .dr{stroke-dashoffset:0!important;fill-opacity:1!important}
  .dh .hwm{clip-path:none!important}
  .dh-sw{opacity:1;transform:none}
  .dh-pen,.dh .cur,.dh-art .hd{display:none}
  .dp.auto .dp-pick.on .bar{animation:none}
  .dp-stage .sc *,.dp-stage .sc *::before,.dp-stage .sc *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .gi *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
  .pg-stage.bump > div{animation:none}
}