/* ============================================================
   WEDEE brand elements
   One graphic idea, used everywhere: the pixel from the logo.
   In the wordmark a grey block sits inside the E's and leaves
   the final E. Every element below is built from that block, so
   pages read as one system without copying anyone's circles.

   The pixel is always 6:5 (20.6 x 17.2 in the logo artwork).
   It is never rounded, rotated, outlined or gradient filled.

   Showcase: /_templates/brand-kit.html
   Load after the page's own CSS. Relies on the tokens in
   site.css / index.html (--purple, --grey, --head and so on).
   ============================================================ */

/* ---------- 1. the pixel ---------- */
.px{display:inline-block;width:var(--s,12px);aspect-ratio:6/5;background:var(--c,var(--grey));flex:none}
.px--violet{--c:var(--purple)}
.px--light{--c:var(--purple-light)}
.px--soft{--c:var(--purple-soft)}
.px--white{--c:#fff}

/* the full stop in a heading, replaced by the pixel: SEO<i class="px-stop"></i> */
.px-stop{display:inline-block;width:.24em;height:.2em;background:var(--c,var(--purple));
  margin-left:.06em;vertical-align:baseline}

/* three pixels leaving, smaller and further apart each time. Divider or sign-off */
.px-trail{display:inline-flex;align-items:flex-end;gap:var(--g,10px);vertical-align:middle}
.px-trail i{display:block;width:var(--s,14px);aspect-ratio:6/5;background:var(--c,var(--purple))}
.px-trail i:nth-child(2){width:calc(var(--s,14px)*.72);margin-left:calc(var(--g,10px)*.4);opacity:.8}
.px-trail i:nth-child(3){width:calc(var(--s,14px)*.5);margin-left:calc(var(--g,10px)*1.1);opacity:.55}

/* accent underline: a bar with its last pixel broken off, like the logo E */
.px-under{background:
    linear-gradient(var(--c,var(--purple)),var(--c,var(--purple))) left bottom/calc(100% - .42em) .09em no-repeat,
    linear-gradient(var(--c,var(--purple)),var(--c,var(--purple))) right bottom/.26em .09em no-repeat;
  padding-bottom:.1em}

/* ---------- 2. pixel fields (WEDEE's halftone) ----------
   A grid of pixels dissolving toward one side. Masks, so any colour works:
   <i class="px-field px-field--burst" style="--c:var(--purple)"></i> */
.px-field{display:block;background:var(--c,var(--purple));pointer-events:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.px-field--edge {--m:url(brand/px-field-edge.svg); aspect-ratio:432/197}
.px-field--burst{--m:url(brand/px-field-burst.svg);aspect-ratio:432/333}
.px-field--diag {--m:url(brand/px-field-diag.svg); aspect-ratio:392/299}
.px-field.flip-x{transform:scaleX(-1)}
.px-field.flip-y{transform:scaleY(-1)}

/* faint pixel grid behind a section: <i class="px-grid" aria-hidden="true"></i> as the first child */
.px-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background:rgba(255,255,255,var(--a,.11));
  -webkit-mask:url(brand/px-grid.svg) 0 0/28px 24px repeat;mask:url(brand/px-grid.svg) 0 0/28px 24px repeat}
/* fade the grid out toward the bottom so it never fights the copy */
.px-grid.fade{background:linear-gradient(rgba(255,255,255,var(--a,.11)),transparent 85%)}
.px-grid-host{position:relative;isolation:isolate}
.px-grid-host>*:not(.px-grid){position:relative;z-index:1}

/* ---------- 3. photo frames ----------
   All rectangular. The logo has no curves, so neither do the masks. */

/* 3a. notched: a pixel cut from the corner of the photo, sitting just outside it */
.frame-notch{position:relative;--nw:clamp(26px,3.6vw,54px);--nh:calc(var(--nw)*5/6);--gap:calc(var(--nw)*.32)}
.frame-notch img{width:100%;display:block;object-fit:cover;
  clip-path:polygon(0 0,calc(100% - var(--nw)) 0,calc(100% - var(--nw)) var(--nh),100% var(--nh),100% 100%,0 100%)}
.frame-notch::after{content:'';position:absolute;top:var(--nh);left:calc(100% + var(--gap));
  width:var(--nw);height:var(--nh);background:var(--c,var(--grey))}
/* bottom left variant: the pixel leaves to the left */
.frame-notch.bl img{clip-path:polygon(0 0,100% 0,100% 100%,var(--nw) 100%,var(--nw) calc(100% - var(--nh)),0 calc(100% - var(--nh)))}
.frame-notch.bl::after{top:auto;bottom:var(--nh);left:auto;right:calc(100% + var(--gap))}

/* 3b. line frame: a thin offset outline behind the photo with a pixel riding its edge */
.frame-line{position:relative;--o:clamp(14px,2vw,26px)}
.frame-line img{position:relative;z-index:1;width:100%;display:block;object-fit:cover}
.frame-line::before{content:'';position:absolute;inset:0;transform:translate(var(--o),var(--o));
  border:1px solid var(--lc,rgba(175,76,255,.75));z-index:0}
.frame-line::after{content:'';position:absolute;z-index:2;width:clamp(16px,1.8vw,24px);aspect-ratio:6/5;
  background:var(--c,var(--purple-soft));right:calc(var(--o) * -1 - clamp(8px,.9vw,12px));top:28%}

/* 3c. portal: a heavy violet block with the photo set inside it, the square answer to a thick ring */
.frame-portal{position:relative;padding:var(--b,clamp(18px,2.8vw,42px));
  background:linear-gradient(150deg,var(--purple) 0%,var(--purple-light) 100%)}
.frame-portal img{width:100%;display:block;object-fit:cover;aspect-ratio:var(--ar,1)}
/* a cut-out (transparent PNG) subject can break out over the top edge */
.frame-portal.breakout{padding-top:0}
.frame-portal.breakout img{margin-top:-18%;aspect-ratio:auto;object-fit:contain;position:relative}

/* ---------- 4. decoration placement ----------
   Fields and loose pixels sit around a frame. Wrap the frame in .deco
   and position children with --x / --y / --w. */
.deco{position:relative}
.deco>.px-field,.deco>.px{position:absolute;left:var(--x,auto);top:var(--y,auto);right:var(--r,auto);
  bottom:var(--btm,auto);width:var(--w,auto);z-index:var(--z,0);opacity:var(--op,1)}
.deco>.px{--s:var(--w,14px)}
.deco>.frame-notch,.deco>.frame-line,.deco>.frame-portal{position:relative;z-index:1}

/* ---------- 5. annotation: a hand note and arrow ---------- */
.note{display:inline-flex;align-items:flex-start;gap:6px;color:var(--c,var(--purple-soft));pointer-events:none}
.note b{font-family:'Caveat',var(--body);font-weight:600;font-size:var(--fs,clamp(22px,2vw,30px));line-height:1;
  letter-spacing:0;text-transform:none;white-space:nowrap}
.note.bebas b{font-family:var(--head);font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.note svg{width:var(--aw,86px);height:auto;overflow:visible;flex:none}
.note svg path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 6. review card ---------- */
.rcard{display:flex;gap:14px;align-items:flex-start;background:#fff;color:#1b1b1b;border-radius:3px;
  padding:16px 18px;max-width:360px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.rcard .av{width:44px;aspect-ratio:1;flex:none;display:grid;place-items:center;background:var(--purple);
  color:#fff;font-family:var(--head);font-size:22px}
.rcard .nm{font-weight:700;font-size:15px;line-height:1.2}
.rcard p{font-size:13.5px;line-height:1.45;color:#444;margin-top:4px}
.rcard .st{color:#F5B301;letter-spacing:2px;font-size:15px;margin-top:6px}
.rcard.dark{background:rgba(14,14,14,.82);color:#fff;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.rcard.dark p{color:rgba(255,255,255,.78)}

/* ---------- 7. hero: reviews with drifting pixels ----------
   Single pixels drift right to left behind the cards and fade before they
   reach the copy: the logo's pixel leaving, "from us, to you". Never a field
   here and never pixels bunched together. Raf, 2026-10-25. Desktop only. */
.hero-px{position:absolute;z-index:3;pointer-events:none;display:none;
  right:clamp(24px,4.5vw,90px);top:clamp(112px,14vh,160px);width:min(38vw,620px);aspect-ratio:1/1.08}
@media(min-width:1180px){.hero-px{display:block}}
.hero-px>*{position:absolute;opacity:0;animation:pxin 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.hero-px .lp{z-index:0;width:var(--s,16px);aspect-ratio:6/5;background:var(--c,var(--purple));
  animation:pxleave var(--d,10s) linear var(--dl,1s) infinite}
.hero-px .lp.a{left:90%;top:1%;--s:16px;--d:10s;--dl:.8s}
.hero-px .lp.b{left:97%;top:33%;--s:12px;--c:var(--grey-light);--d:12s;--dl:3.2s}
.hero-px .lp.c{left:84%;top:63%;--s:14px;--c:var(--purple-soft);--d:11s;--dl:5.6s}
.hero-px .lp.d{left:94%;top:95%;--s:18px;--d:13s;--dl:2s}
@keyframes pxleave{0%{transform:translateX(0);opacity:0}10%{opacity:1}75%{opacity:.85}100%{transform:translateX(calc(min(38vw,620px) * -.62));opacity:0}}

.hrev{z-index:1;width:min(290px,64%);padding:18px 20px 17px;border-radius:2px;
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px)}
.hrev::before{content:'';position:absolute;top:-7px;right:18px;width:14px;aspect-ratio:6/5;background:var(--purple)}
.hrev .fr-top{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.hrev .fr-g{font-family:Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.4px}
.hrev .fr-g b:nth-child(1){color:#4285F4}.hrev .fr-g b:nth-child(2){color:#EA4335}
.hrev .fr-g b:nth-child(3){color:#FBBC05}.hrev .fr-g b:nth-child(4){color:#4285F4}
.hrev .fr-g b:nth-child(5){color:#34A853}.hrev .fr-g b:nth-child(6){color:#EA4335}
.hrev .fr-stars{color:#FBBC05;font-size:12px;letter-spacing:1.5px}
.hrev p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.9);font-style:italic}
.hrev .fr-who{margin-top:11px;font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.hrev.r1{right:10%;top:5%}
.hrev.r2{left:0;top:38%}
.hrev.r3{right:6%;top:70%}
/* a slow bob once they have landed, each out of step with the others */
.hrev{animation:pxin 1s cubic-bezier(.2,.7,.2,1) forwards,bob 9s ease-in-out infinite}
.hrev.r1{animation-delay:1s,2s}.hrev.r2{animation-delay:1.5s,3.1s;animation-duration:1s,10s}
.hrev.r3{animation-delay:2s,2.5s;animation-duration:1s,8s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes pxin{from{opacity:0;transform:translateY(18px)}to{opacity:var(--op,1);transform:none}}
@media(prefers-reduced-motion:reduce){.hero-px>*{animation:none!important;opacity:var(--op,1)}.hero-px .lp{display:none}}

/* ---------- 8. reviews: floating bubbles (J-Cut's layout, WEDEE's geometry) ---------- */
.revbub{overflow:hidden}
.revbub-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:clamp(36px,4vw,56px)}
.gbadge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:2px;padding:11px 18px;color:#fff;text-decoration:none;font-size:13px;transition:border-color .2s,background .2s;flex:none}
.gbadge:hover{border-color:rgba(175,76,255,.55);background:rgba(143,68,248,.08)}
.gbadge .st{color:#FBBC05;letter-spacing:1.5px;font-size:12px}
.gbadge b{font-family:var(--head);font-weight:400;font-size:20px;line-height:1}
.gbadge i{width:1px;height:14px;background:rgba(255,255,255,.18)}
.gbadge span:last-child{color:rgba(255,255,255,.6)}
.bub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.bub-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.bub-grid{grid-template-columns:repeat(2,1fr)}.bub-slot{--mt:0px!important}}
@media(max-width:520px){.bub-grid{grid-template-columns:1fr}}
.bub-slot{margin-top:var(--mt,0);transition:transform .45s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.bub-float{animation:bubfloat ease-in-out infinite;height:100%}
@keyframes bubfloat{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-14px) rotate(.4deg)}50%{transform:translateY(-8px) rotate(-.2deg)}75%{transform:translateY(-18px) rotate(.3deg)}}
.bub-card{position:relative;height:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:2px;
  padding:22px 22px 20px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;backdrop-filter:blur(6px)}
.bub-card::before{content:'';position:absolute;top:-7px;right:18px;width:14px;aspect-ratio:6/5;background:var(--purple)}
.bub-card:hover{transform:scale(1.04) translateY(-6px);border-color:rgba(175,76,255,.45);
  box-shadow:0 0 36px rgba(143,68,248,.22),0 20px 60px rgba(0,0,0,.5);z-index:5}
.bub-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bub-av{width:36px;height:30px;flex:none;display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--head);font-size:15px;letter-spacing:.04em}
.bub-who{min-width:0;flex:1}
.bub-who b{display:block;font-size:13.5px;color:#fff;line-height:1.2}
.bub-who span{display:block;font-size:11.5px;color:rgba(255,255,255,.45);margin-top:2px}
.bub-top .g{flex:none}
.bub-stars{color:#FBBC05;font-size:12px;letter-spacing:2px;margin-bottom:10px}
.bub-card p{font-size:13.8px;line-height:1.65;color:rgba(255,255,255,.75);font-style:italic}
.bub-cta{display:flex;justify-content:center;margin-top:clamp(40px,5vw,60px)}
@media(prefers-reduced-motion:reduce){.bub-float{animation:none}}

/* ---------- 9. offer notice (assets/offer.js) ---------- */
.offer-toast{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:300;max-width:min(380px,calc(100vw - 100px));
  display:flex;align-items:flex-start;gap:6px;background:#0d0d0d;border:1px solid rgba(175,76,255,.5);border-radius:2px;
  padding:14px 10px 14px 16px;box-shadow:0 18px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.offer-toast.in{opacity:1;transform:none}
.offer-toast::before{content:'';position:absolute;top:-7px;left:16px;width:14px;aspect-ratio:6/5;background:var(--purple)}
.offer-toast a{color:var(--grey-light);text-decoration:none;font-size:13.5px;line-height:1.5}
.offer-toast a b{color:#fff;font-weight:700;white-space:nowrap}
.offer-toast .ot-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);font-weight:700;margin-bottom:3px}
.offer-toast button{flex:none;background:none;border:0;color:var(--grey);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.offer-toast button:hover{color:#fff}

/* ---------- 10. footer map (as on jcutproduction.com) ---------- */
.fmap{margin-top:clamp(30px,4vw,48px);padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--line)}
.fmap-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px}
.fmap-head span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light)}
.fmap-head a{font-size:13px;color:var(--grey);text-decoration:none}
.fmap-head a:hover{color:#fff}
.fmap iframe{display:block;border:1px solid var(--line);border-radius:2px;filter:invert(90%) hue-rotate(180deg)}