/* =====================================================================
   CEEK — product scenes on the Brand & Social page. Built on the .svx scene system
   in services.css (base cards, chips, lists, motion); only this page loads this file.
   ===================================================================== */

/* ---------- shared by this page's scenes ---------- */
.svx-b-label{font-size:.8em;color:var(--text-3)}
/* a two-way switch: New logo / Refresh */
.svx-b-seg{display:inline-flex;padding:.2em;border-radius:99em;background:#EFE9E0;font-size:.8em;line-height:1;white-space:nowrap}
.svx-b-seg>*{padding:.42em .85em .48em;border-radius:99em;color:var(--text-3)}
.svx-b-seg>b{color:var(--text);background:var(--white);box-shadow:0 .06em .24em rgba(18,20,23,.14)}
/* the business's mark on a round avatar, and a person on one */
.svx-b-me{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-b-me svg{width:52%;height:52%}
.svx-b-ava{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:radial-gradient(circle at 50% 39%,rgba(251,248,243,.92) 0 16%,transparent 17%),radial-gradient(circle at 50% 104%,rgba(251,248,243,.92) 0 36%,transparent 37%),var(--c,var(--taupe))}
/* little photos, drawn in our colours: a hill under the sun, an arch, a still life, a horizon, a moon, a pebble */
.svx-b-ph--a{--ph:radial-gradient(circle at 50% 122%,var(--mist) 50%,transparent 50.5%),radial-gradient(circle at 30% 32%,var(--white) 13%,transparent 13.5%),var(--sand);background:var(--ph)}
.svx-b-ph--b{--ph:radial-gradient(circle at 50% 100%,transparent 23%,var(--sand) 23.5% 37%,transparent 37.5%),var(--mist-2);background:var(--ph)}
.svx-b-ph--c{--ph:radial-gradient(circle at 64% 38%,var(--mist) 19%,transparent 19.5%),linear-gradient(180deg,var(--paper) 0 62%,var(--taupe) 62%);background:var(--ph)}
.svx-b-ph--d{--ph:radial-gradient(circle at 70% 30%,var(--white) 11%,transparent 11.5%),linear-gradient(180deg,var(--mist-2) 0 56%,var(--sand) 56%);background:var(--ph)}
.svx-b-ph--e{--ph:radial-gradient(circle at 50% 50%,var(--sand) 18%,transparent 18.5%),var(--mist);background:var(--ph)}
.svx-b-ph--f{--ph:radial-gradient(ellipse 34% 26% at 46% 58%,var(--white) 96%,transparent 100%),var(--taupe);background:var(--ph)}

/* ---------- C1 logo & branding: the mark on its artboard, its colours, business cards to match ---------- */
.svx--b-logo{--a:#F5EFE5;--b:#D8C7AC;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.36)}
.svx-b-art{left:7%;top:9%;width:56%;padding:.9em 1em 1em}
.svx-b-art-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.svx-b-canvas{overflow:hidden;border-radius:.6em;background:var(--paper);box-shadow:inset 0 0 0 .06em rgba(18,20,23,.05)}
.svx-b-canvas svg{display:block;width:100%;height:auto}
.svx-b-shape,.svx-b-dot{transform-box:fill-box;transform-origin:50% 50%}
.svx-b-colours{display:flex;align-items:center;margin-top:.8em}
.svx-b-colours .svx-b-label{margin-right:.75em}
.svx-b-colours i{position:relative;width:1.5em;height:1.5em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .14em var(--white)}
.svx-b-colours i+i{margin-left:-.3em}
.svx-b-colours i:nth-of-type(2){--k:1}
.svx-b-colours i:nth-of-type(3){--k:2}
.svx-b-colours i:nth-of-type(4){--k:3}
/* the business cards: the back in the brand colour, the front with the details */
.svx-b-bc{position:absolute;left:45%;top:50%;width:48%;aspect-ratio:48/36}
.svx-b-bc>div{position:absolute;width:74%;aspect-ratio:85/55;border-radius:.35em;box-shadow:var(--sh);font-size:3cqw}
.svx-b-bc-back{left:0;top:0;rotate:-7deg;padding:1.05em 1.15em;background:var(--mist);color:var(--white)}
.svx-b-bc-front{right:0;bottom:0;rotate:3deg;display:flex;flex-direction:column;justify-content:space-between;padding:1em 1.1em 1.05em;background:var(--white)}
/* the lockup: the mark, then the name */
.svx-b-word{display:flex;align-items:center;gap:.4em;font-weight:500;letter-spacing:-.04em}
.svx-b-word svg{flex:none;width:1.35em;height:1.35em;color:var(--mist)}
.svx-b-word em{color:var(--mist)}
.svx-b-bc-back .svx-b-word{gap:.3em;font-size:1.45em;letter-spacing:-.045em}
.svx-b-bc-back .svx-b-word svg{width:1.2em;height:1.2em;color:var(--white)}
.svx-b-bc-back .svx-b-word em{color:var(--sand)}
.svx-b-bc-lines i{display:block;width:50%;height:.42em;border-radius:99em;background:var(--text)}
.svx-b-bc-lines i+i{width:34%;height:.28em;margin-top:.45em;background:rgba(18,20,23,.16)}
.svx-b-bc-lines em{display:block;margin-top:.65em;font-size:.76em;color:var(--text-3)}
.svx-b-tmpl{left:7%;top:79%}

/* ---------- C2 social media: the month planned, posts and stories in place, replies answered, the report ---------- */
.svx--b-social{--a:#A6B6C2;--b:#71879A}
.svx-b-plan{left:36%;top:9%;width:57%;padding:1em 1.1em 1.05em}
.svx-b-plan-head{display:flex;align-items:center;gap:.6em;margin-bottom:.9em}
.svx-b-week,.svx-b-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em}
.svx-b-week{margin-bottom:.4em;font-size:.74em;line-height:1;text-align:center;color:var(--text-3)}
.svx-b-cal i{position:relative;aspect-ratio:1;border-radius:.42em;background:#F1ECE4}
.svx-b-post::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ph)}
.svx-b-cal i:nth-child(n+8){--r:1}
.svx-b-cal i:nth-child(n+15){--r:2}
.svx-b-cal i:nth-child(n+22){--r:3}
.svx-b-story::before{content:"";position:absolute;inset:18%;border-radius:50%;background:var(--c);box-shadow:0 0 0 .12em var(--white),0 0 0 .24em var(--mist)}
.svx-b-legend{display:flex;gap:1.1em;margin-top:.9em;font-size:.8em;color:var(--text-2)}
.svx-b-legend span{display:flex;align-items:center;gap:.45em}
.svx-b-legend i{position:relative;width:1.15em;height:1.15em;border-radius:.28em}
.svx-b-legend .svx-b-story::before{inset:16%;box-shadow:0 0 0 .1em var(--white),0 0 0 .2em var(--mist)}
.svx-b-replies{left:7%;top:56%;width:50%;padding:.95em 1em 1.05em}
.svx-b-replies-head{display:flex;align-items:center;gap:.55em;margin-bottom:.8em}
.svx-b-replies-head .svx-live{margin-left:auto}
.svx-b-msg{display:flex;align-items:flex-end;gap:.5em}
.svx-b-msg+.svx-b-msg{margin-top:.55em}
.svx-b-msg--out{justify-content:flex-end}
.svx-b-bub{display:flex;flex-direction:column;gap:.36em;padding:.72em .9em .74em;border-radius:1em}
.svx-b-bub i{display:block;width:7.6em;height:.34em;border-radius:99em;background:rgba(18,20,23,.18)}
.svx-b-bub i+i{width:4.8em}
.svx-b-msg--in .svx-b-bub{background:#F0EAE1;border-bottom-left-radius:.3em}
.svx-b-msg--out .svx-b-bub{background:var(--mist);border-bottom-right-radius:.3em}
.svx-b-msg--out .svx-b-bub i{width:6.8em;background:rgba(251,248,243,.78)}
.svx-b-msg--out .svx-b-bub i+i{width:5.6em}
.svx-b-report{right:7%;top:72%}
.svx-b-doc{flex:none;display:flex;flex-direction:column;justify-content:center;gap:.17em;width:1.15em;height:1.4em;padding:0 .24em;border-radius:.2em;background:var(--paper);box-shadow:inset 0 0 0 .07em rgba(18,20,23,.14)}
.svx-b-doc i{height:.11em;border-radius:99em;background:rgba(18,20,23,.28)}
.svx-b-doc i:first-child{width:70%;background:var(--mist)}

/* ---------- C3 content day: in the studio, the shot (upright, for the feed), then fresh photos and video ---------- */
.svx--b-day{--a:#E2D8CB;--b:#B5A592;--dot:rgba(106,129,147,.26);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.4)}
.svx-b-cam{left:7%;top:9%;width:44%;padding:.45em}
.svx-b-vf{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:.5em;isolation:isolate}
.svx-b-set{display:block;width:100%;height:100%}
.svx-b-thirds,.svx-b-flash{position:absolute;inset:0}
.svx-b-thirds::before,.svx-b-thirds::after{content:"";position:absolute;border:0 solid rgba(251,248,243,.55)}
.svx-b-thirds::before{inset:0 33.33%;border-width:0 .06em}
.svx-b-thirds::after{inset:33.33% 0;border-width:.06em 0}
.svx-b-focus{position:absolute;left:27%;top:29%;width:51%;height:42%;filter:drop-shadow(0 0 .12em rgba(18,20,23,.3))}
.svx-b-focus i{position:absolute;width:20%;height:15%;border:0 solid var(--white)}
.svx-b-focus i:nth-child(1){left:0;top:0;border-width:.13em 0 0 .13em}
.svx-b-focus i:nth-child(2){right:0;top:0;border-width:.13em .13em 0 0}
.svx-b-focus i:nth-child(3){left:0;bottom:0;border-width:0 0 .13em .13em}
.svx-b-focus i:nth-child(4){right:0;bottom:0;border-width:0 .13em .13em 0}
.svx-b-modes{position:absolute;left:50%;bottom:.7em;translate:-50% 0;display:flex;gap:.15em;padding:.22em;border-radius:99em;background:rgba(18,20,23,.3);font-size:.8em;line-height:1;white-space:nowrap;color:rgba(251,248,243,.82)}
.svx-b-modes>*{padding:.4em .8em .46em;border-radius:99em}
.svx-b-modes b{background:var(--white);color:var(--text)}
.svx-b-flash{background:var(--white);opacity:0}
.svx-b-ctrl{display:flex;justify-content:center;padding:.75em 0 .3em}
.svx-b-shutter{width:2.4em;height:2.4em;border-radius:50%;background:var(--mist);box-shadow:0 0 0 .2em var(--white),0 0 0 .34em rgba(106,129,147,.4)}
.svx-b-roll{left:45%;top:40%;width:48%;padding:.9em 1em 1em}
.svx-b-roll-head{margin-bottom:.75em}
.svx-b-roll-head b{display:block}
.svx-b-roll-head em{display:block;margin-top:.22em;font-size:.8em;color:var(--text-3)}
.svx-b-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35em}
.svx-b-thumbs i{position:relative;aspect-ratio:1;overflow:hidden;border-radius:.45em}
.svx-b-thumbs i:nth-child(2){--k:1}
.svx-b-thumbs i:nth-child(3){--k:2}
.svx-b-thumbs i:nth-child(4){--k:3}
.svx-b-shot svg{display:block;width:100%;height:100%}
.svx-b-vid svg{position:absolute;left:50%;top:50%;width:1.35em;height:1.35em;margin:-.675em 0 0 -.675em;padding:.28em;border-radius:50%;background:rgba(18,20,23,.32);color:var(--white)}
.svx-b-loc{right:7%;top:71%}
.svx-b-pin{flex:none;display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-b-pin svg{width:64%;height:64%}

/* ---------- C4 google & reviews: the profile in shape, found on the map, reviews coming in ---------- */
.svx--b-google{--a:#8EA1B0;--b:#566C7E}
.svx-b-gbp{left:35%;top:9%;width:58%;overflow:hidden}
.svx-b-map{position:relative;aspect-ratio:56/17;background:#ECE5DA}
.svx-b-map>svg{position:absolute;inset:0;width:100%;height:100%}
.svx-b-mpin{position:absolute;left:50%;top:56%;width:1.5em;margin:-1.875em 0 0 -.75em}
.svx-b-mpin svg{display:block;width:100%;height:auto}
.svx-b-mpin::after{content:"";position:absolute;left:50%;top:100%;z-index:-1;width:.9em;height:.3em;margin:-.15em 0 0 -.45em;border-radius:50%;background:rgba(18,20,23,.2)}
.svx-b-gbp-body{padding:.85em 1.1em 1.05em}
.svx-b-gbp-head{display:flex;align-items:center;gap:.6em}
.svx-b-gbp-head .svx-b-me{width:2.1em;height:2.1em}
.svx-b-gbp-head b{display:block;font-size:1.1em}
.svx-b-gbp-head em{display:block;margin-top:.15em;font-size:.8em;color:var(--text-3)}
.svx-b-gbp-row{display:flex;align-items:center;margin-top:.85em}
.svx-b-acts{display:flex;gap:.45em}
.svx-b-acts i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:rgba(106,129,147,.14);color:var(--mist)}
.svx-b-acts svg{width:48%;height:48%}
.svx-b-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3em;margin-top:.85em}
.svx-b-photos i{aspect-ratio:4/3;border-radius:.4em}
.svx-b-photos i:nth-child(2){--k:1}
.svx-b-photos i:nth-child(3){--k:2}
.svx-b-photos i:nth-child(4){--k:3}
/* reviews come in and stack up: the newest on top, the one before peeking out below */
.svx-b-revs{position:absolute;left:7%;top:52.5%;width:52%;height:22cqw}
.svx-b-rev{left:0;right:0;top:0;padding:1em 1.1em 1.1em}
.svx-b-rev--old{translate:0 2.7cqw;scale:.92;transform-origin:50% 100%;background:#F1ECE4}
.svx-b-rev-head{display:flex;align-items:center;gap:.6em}
.svx-b-rev .svx-b-ava{width:2em;height:2em}
.svx-b-rev-who{display:flex;flex-direction:column;gap:.38em}
.svx-b-rev-who i{display:block;width:5em;height:.36em;border-radius:99em;background:rgba(18,20,23,.5)}
.svx-b-rev-who .svx-stars{font-size:.85em}
.svx-b-rev-text{display:flex;flex-direction:column;gap:.36em;margin-top:.8em}
.svx-b-rev-text i{display:block;width:92%;height:.32em;border-radius:99em;background:rgba(18,20,23,.14)}
.svx-b-rev-text i:nth-child(2){width:78%}
.svx-b-rev-text i:nth-child(3){width:52%}
.svx-b-shape-ok{left:7%;top:80%}

/* ---------- even rows round their top-left corner on desktop, the top-right on phones: the scene follows ---------- */
@media (max-width:768px){
  .svx-b-plan{left:7%}
  .svx-b-replies{left:43%}
  .svx-b-report{right:auto;left:7%}
  .svx-b-gbp{left:7%}
  .svx-b-revs{left:41%}
}

/* ---------- narrow scenes (phones, small two-column screens): the type steps up so it stays readable ---------- */
@container (max-width:480px){
  :is(.svx--b-logo,.svx--b-social,.svx--b-day,.svx--b-google) :is(.svx-card,.svx-b-bc>div){font-size:3.4cqw}
  :is(.svx--b-logo,.svx--b-social,.svx--b-day,.svx--b-google) .svx-card.svx-chip{font-size:3.05cqw}
  .svx-b-revs{top:55%}
}
/* the same, beside the text on a small screen: the replies make room for the plan's key, the chip for the reviews */
@media (min-width:769px){
  @container (max-width:480px){.svx-b-replies{top:59.5%}.svx-b-shape-ok{top:84%}}
}

/* ---------- motion: play in once per visit, then breathe (services.js adds .is-armed, then .is-live) ---------- */
@keyframes svx-b-flash{0%,100%{opacity:0}14%{opacity:.85}}
.svx-b-bc,.svx-b-replies,.svx-b-roll,.svx-b-revs{animation:svx-bob 7s ease-in-out infinite paused}
.svx-b-bc{animation-delay:-1.5s}
.svx.is-armed :where(.svx-b-cal i)::before{transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
.svx.is-armed :where(.svx-b-guides,.svx-b-shape,.svx-b-dot,.svx-b-sel,.svx-b-handles,.svx-b-colours i,.svx-b-bc>div,.svx-b-replies,.svx-b-msg,.svx-b-focus,.svx-b-roll,.svx-b-thumbs i,.svx-b-mpin,.svx-b-photos i,.svx-b-rev){transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
/* hidden until the scene is in view */
.svx.is-armed:not(.is-live) :is(.svx-b-guides,.svx-b-sel,.svx-b-handles){opacity:0}
.svx.is-armed:not(.is-live) :is(.svx-b-shape,.svx-b-dot,.svx-b-colours i,.svx-b-thumbs i,.svx-b-photos i),.svx.is-armed:not(.is-live) .svx-b-cal i::before{opacity:0;transform:scale(.6)}
.svx.is-armed:not(.is-live) .svx-b-bc-back{opacity:0;transform:translate3d(-2cqw,10cqw,0) rotate(-5deg)}
.svx.is-armed:not(.is-live) .svx-b-bc-front{opacity:0;transform:translate3d(3cqw,12cqw,0) rotate(6deg)}
.svx.is-armed:not(.is-live) :is(.svx-b-replies,.svx-b-roll,.svx-b-rev){opacity:0;transform:translate3d(0,5cqw,0)}
.svx.is-armed:not(.is-live) .svx-b-msg{opacity:0;transform:translate3d(0,.7em,0)}
.svx.is-armed:not(.is-live) .svx-b-focus{opacity:0;transform:scale(1.3)}
.svx.is-armed:not(.is-live) .svx-b-mpin{opacity:0;transform:translate3d(0,-2.2em,0)}
/* C1: the guides, the mark, the selection, the colours, then the cards and the templates */
.svx.is-live .svx-b-guides{transition-delay:.15s}
.svx.is-live .svx-b-shape{transition-delay:.5s}
.svx.is-live .svx-b-dot{transition-delay:.75s}
.svx.is-live .svx-b-sel{transition-delay:1s}
.svx.is-live .svx-b-handles{transition-delay:1.12s}
.svx.is-live .svx-b-colours i{transition-delay:calc(1.25s + var(--k,0) * .08s)}
.svx.is-live .svx-b-bc-back{transition-delay:1.5s}
.svx.is-live .svx-b-bc-front{transition-delay:1.7s}
.svx.is-live .svx-b-tmpl{transition-delay:2.2s}
/* C2: the month fills in row by row, a reply comes in and is answered, the report */
.svx.is-live .svx-b-cal i::before{transition-delay:calc(.35s + var(--r,0) * .12s)}
.svx.is-live .svx-b-replies{transition-delay:.9s}
.svx.is-live .svx-b-msg--in{transition-delay:1.35s}
.svx.is-live .svx-b-msg--out{transition-delay:2.1s}
.svx.is-live .svx-b-report{transition-delay:2.6s}
/* C3: focus, the shutter, a flash, and the shot lands with the rest */
.svx.is-live .svx-b-focus{transition-duration:.5s,.7s;transition-delay:.45s}
.svx.is-live .svx-b-shutter{animation:svx-press .35s ease 1.35s both}
.svx.is-live .svx-b-flash{animation:svx-b-flash .8s ease-out 1.5s both}
.svx.is-live .svx-b-roll{transition-delay:1.75s}
.svx.is-live .svx-b-thumbs i{transition-delay:calc(2s + var(--k,0) * .09s)}
.svx.is-live .svx-b-loc{transition-delay:2.45s}
/* C4: the pin drops, the photos fill in, the reviews come in one by one, and the profile is in shape */
.svx.is-live .svx-b-mpin{transition:opacity .4s var(--e-out) .35s,transform .9s var(--e-spring) .35s}
.svx.is-live .svx-b-photos i{transition-delay:calc(.8s + var(--k,0) * .08s)}
.svx.is-live .svx-b-rev--old{transition-delay:1.4s}
.svx.is-live .svx-b-rev--new{transition-delay:2.15s}
.svx.is-live .svx-b-rev--old .svx-stars svg{transition-delay:calc(1.7s + var(--k,0) * .08s)}
.svx.is-live .svx-b-rev--new .svx-stars svg{transition-delay:calc(2.45s + var(--k,0) * .08s)}
.svx.is-live .svx-b-shape-ok{transition-delay:2.95s}