/* Juicy Digital runtime styles. Gutenberg-first: core blocks provide structure/content;
   these classes provide the expressive brand layer and interactions. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { max-width: 100%; height: auto; }
.site-content { min-height: 50vh; }
.juicy-site-content { overflow: clip; }

.hide-mobile { display: block; }
.hide-desktop { display: none; }

.juicy-section { position: relative; isolation: isolate; overflow: hidden; }
.juicy-section > * { position: relative; z-index: 2; }
.juicy-kicker { margin-bottom: 1rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.juicy-display-title { max-width: 8.5ch; margin-top: .2em; margin-bottom: .22em; text-wrap: balance; }
.juicy-hero-copy { max-width: 650px; }
.juicy-microcopy { margin-top: 2.4rem; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.juicy-hand-note { font-family: Georgia, 'Times New Roman', serif; font-style: italic; transform: rotate(-2deg); display: inline-block; }

/* Animated liquid section transitions. The colour is set per section with
   --juicy-wave-colour, while the SVG mask creates an actual moving wave edge. */
.juicy-wave-bottom::after,
.juicy-wave-top::before {
  content: '';
  position: absolute;
  left: -12%;
  width: 124%;
  height: clamp(72px, 9vw, 138px);
  z-index: 4;
  pointer-events: none;
  background: var(--juicy-wave-colour, var(--wp--preset--color--cream));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74C145 24 262 21 395 63c128 40 238 67 375 24 158-50 247-76 392-24 105 37 183 38 278 2v75H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 74C145 24 262 21 395 63c128 40 238 67 375 24 158-50 247-76 392-24 105 37 183 38 278 2v75H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: transform;
}
.juicy-wave-bottom::after {
  bottom: -2px;
  transform-origin: 50% 100%;
  animation: juicy-wave-bottom 7.5s ease-in-out infinite alternate;
}
.juicy-wave-top::before {
  top: -2px;
  transform-origin: 50% 0;
  animation: juicy-wave-top 8.5s ease-in-out infinite alternate;
}
@keyframes juicy-wave-bottom {
  0%   { transform: translate3d(-3.5%, 42%, 0) scaleX(1.035) scaleY(.92); }
  45%  { transform: translate3d(1.5%, 34%, 0) scaleX(.985) scaleY(1.08); }
  100% { transform: translate3d(4%, 39%, 0) scaleX(1.025) scaleY(.97); }
}
@keyframes juicy-wave-top {
  0%   { transform: translate3d(3%, -42%, 0) rotate(180deg) scaleX(1.025) scaleY(.94); }
  50%  { transform: translate3d(-1%, -34%, 0) rotate(180deg) scaleX(.99) scaleY(1.08); }
  100% { transform: translate3d(-4%, -40%, 0) rotate(180deg) scaleX(1.035) scaleY(.98); }
}
/* A second translucent ripple gives the divider more of Sayian's liquid depth. */
.juicy-wave-bottom { --juicy-wave-highlight: rgba(255,255,255,.22); }
.juicy-wave-bottom > .wp-block-group:first-child::before,
.juicy-wave-top > .wp-block-group:first-child::before { content:none; }
.juicy-hero { --juicy-wave-colour: var(--wp--preset--color--lemon); }
.juicy-work-section { --juicy-wave-colour: var(--wp--preset--color--lemon); }
.juicy-platforms { --juicy-wave-colour: var(--wp--preset--color--grape); }
.juicy-contact { --juicy-wave-colour: var(--wp--preset--color--grape); }

/* Hero bottle + digital objects. Decorative and intentionally separated from editable copy. */
.juicy-bottle-scene { position: relative; min-height: clamp(480px, 52vw, 720px); width: min(100%, 650px); margin-inline: auto; perspective: 1200px; }
.juicy-bottle { position: absolute; left: 50%; top: 49%; width: clamp(180px, 24vw, 310px); height: clamp(400px, 48vw, 610px); transform: translate(-50%, -50%) rotate(6deg); filter: drop-shadow(0 34px 38px rgba(55,15,35,.2)); z-index: 5; }
.juicy-bottle__cap { width: 34%; height: 8%; margin: 0 auto -1px; border-radius: 16px 16px 7px 7px; background: #f7efe3; border: 3px solid rgba(23,35,38,.78); position: relative; z-index: 3; }
.juicy-bottle__glass { height: 92%; border-radius: 42% 42% 19% 19% / 13% 13% 8% 8%; border: 3px solid rgba(255,255,255,.86); background: linear-gradient(110deg, rgba(255,255,255,.46), rgba(255,255,255,.08) 32%, rgba(255,255,255,.26) 68%, rgba(255,255,255,.1)); box-shadow: inset 12px 0 22px rgba(255,255,255,.28), inset -10px 0 20px rgba(120,36,68,.18); overflow: hidden; position: relative; backdrop-filter: blur(2px); }
.juicy-bottle__liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; background: linear-gradient(180deg, #ff9c2f 0%, #ff7153 35%, #ff4f9a 100%); border-radius: 45% 45% 15% 15% / 7% 7% 5% 5%; opacity: .92; }
.juicy-bottle__liquid::before { content:''; position:absolute; inset:-12px -5px auto; height:35px; background:rgba(255,244,183,.7); border-radius:50%; transform:rotate(-3deg); }
.juicy-bottle__label { position: absolute; z-index: 3; left: 12%; right: 12%; top: 31%; padding: 18px 12px; border: 2px solid rgba(23,35,38,.75); background: rgba(255,248,238,.88); color: #172326; text-align: center; transform: rotate(-3deg); }
.juicy-bottle__label b { display:block; font-family: var(--wp--preset--font-family--juicy-display); font-size: clamp(2rem,4vw,4rem); line-height:.85; letter-spacing:-.06em; }
.juicy-bottle__label em { display:block; margin-top:5px; font-style:normal; font-weight:900; font-size:.72rem; letter-spacing:.18em; }
.juicy-bottle__label span { display:block; margin-top:10px; font-size:.58rem; font-weight:800; }
.juicy-tech-card { position:absolute; z-index:7; width:clamp(150px,18vw,230px); padding:14px 16px; border:2px solid rgba(23,35,38,.75); border-radius:18px; background:rgba(255,255,255,.9); color:#172326; box-shadow:0 18px 30px rgba(45,18,35,.12); backdrop-filter:blur(10px); }
.juicy-tech-card span { float:right; opacity:.5; font-size:.7rem; }
.juicy-tech-card strong, .juicy-tech-card small { display:block; }
.juicy-tech-card strong { font-size:.78rem; letter-spacing:.08em; }
.juicy-tech-card small { margin-top:4px; font-size:.68rem; opacity:.7; }
.juicy-tech-card--one { left:0; top:16%; transform:rotate(-7deg); }
.juicy-tech-card--two { right:-2%; top:32%; transform:rotate(7deg); }
.juicy-tech-card--three { left:2%; bottom:14%; transform:rotate(4deg); }
.juicy-code-chip, .juicy-cursor-chip { position:absolute; z-index:8; display:grid; place-items:center; width:68px; height:68px; border-radius:50%; font-weight:900; border:2px solid #172326; color:#172326; }
.juicy-code-chip { right:10%; bottom:13%; background:#9fe149; transform:rotate(-12deg); }
.juicy-cursor-chip { right:4%; top:9%; background:#ffe238; font-size:1.6rem; }
.juicy-orbit { position:absolute; border:2px dashed rgba(255,255,255,.45); border-radius:50%; z-index:1; }
.juicy-orbit--one { inset:9% 7% 8%; transform:rotate(-12deg); }
.juicy-orbit--two { inset:20% 1% 19% 18%; transform:rotate(16deg); }

/* Service cards */
.juicy-service-card, .juicy-article-card { min-height: 330px; padding: clamp(26px,3vw,42px); border-radius: 32px; border: 2px solid rgba(23,35,38,.75); box-shadow: 9px 9px 0 rgba(23,35,38,.9); transition: transform .25s ease, box-shadow .25s ease; }
.juicy-service-card h3, .juicy-article-card h3 { margin-top:auto; }
@media (hover:hover) and (pointer:fine) {
  .juicy-service-card:hover, .juicy-article-card:hover { transform: translate(-4px,-4px) rotate(-.7deg); box-shadow: 14px 14px 0 rgba(23,35,38,.9); }
}

/* Horizontal work reel. Gutenberg groups stay editable; JS enhances on desktop. */
.juicy-project-scroller { margin-top: 70px; overflow: hidden; }
.juicy-project-track { gap: 28px; width: max-content; padding: 10px clamp(20px,4vw,56px) 40px; align-items: stretch !important; }
.juicy-project-card { flex: 0 0 min(72vw, 940px); min-height: 650px; padding: clamp(28px,4vw,54px); border-radius: 38px; border: 2px solid rgba(255,255,255,.2); display:flex; flex-direction:column; }
.juicy-project-card > * { width: 100%; }
.juicy-project-media { min-height: 360px; margin-block: 28px; border-radius: 26px; border: 2px dashed currentColor; display:grid; place-items:center; background: color-mix(in srgb, currentColor 6%, transparent); overflow:hidden; }
.juicy-project-media p { font-size:.72rem; letter-spacing:.12em; font-weight:800; opacity:.7; text-align:center; }

/* Platforms */
.juicy-platform-grid { gap: 14px !important; }
.juicy-platform-grid p { margin:0 !important; padding:16px 20px; border:2px solid #172326; border-radius:999px; font-weight:850; background:rgba(255,255,255,.48); box-shadow:4px 4px 0 rgba(23,35,38,.85); }

/* AI console gives the juice world an obvious technology counterweight. */
.juicy-ai-console { border:2px solid rgba(255,255,255,.75); border-radius:28px; overflow:hidden; background:#10191c; color:#eafff8; box-shadow:0 30px 70px rgba(38,7,52,.28); transform:rotate(2deg); }
.juicy-ai-console__bar { display:flex; gap:8px; align-items:center; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.16); font:700 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.juicy-ai-console__bar i { width:10px; height:10px; border-radius:50%; background:#ff4f9a; }
.juicy-ai-console__bar i:nth-child(2){background:#ffe238}.juicy-ai-console__bar i:nth-child(3){background:#9fe149}
.juicy-ai-console__bar span { margin-left:auto; opacity:.6; }
.juicy-ai-console__body { padding:clamp(28px,5vw,64px); font:700 clamp(.85rem,1.25vw,1.05rem)/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.juicy-ai-console__body p { padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.juicy-ai-console__body b { display:inline-block; min-width:80px; color:#9fe149; }
.juicy-ai-nodes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:28px; }
.juicy-ai-nodes span { min-height:76px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:14px; background:rgba(255,255,255,.06); }

.juicy-normal { background-image: linear-gradient(rgba(23,35,38,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,35,38,.035) 1px, transparent 1px); background-size: 36px 36px; }
.juicy-normal .wp-block-separator { margin-block: 34px; }

.juicy-contact h2 { max-width: 10ch; margin-inline:auto; }
.juicy-contact p { max-width: 720px; margin-inline:auto; }

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link { border-width:2px; }
.wp-element-button { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover:hover) and (pointer:fine) { .wp-element-button:hover { transform:translateY(-2px); box-shadow:0 8px 0 rgba(23,35,38,.18); } }

/* Existing base helpers */
.base-breadcrumbs { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:.875rem; }
.base-breadcrumbs__separator { opacity:.5; }
.base-card { padding:clamp(1rem,2vw,2rem); border:1px solid var(--wp--preset--color--ink,#172326); border-radius:1rem; background:var(--wp--preset--color--white,#fff); }

@media (max-width: 980px) {
  .juicy-service-grid { flex-wrap: wrap !important; }
  .juicy-service-grid > .wp-block-column { flex-basis: calc(50% - 14px) !important; }
  .juicy-project-card { flex-basis: min(86vw,760px); min-height:560px; }
  .juicy-project-media { min-height:300px; }
}

@media (max-width: 781px) {
  .hide-mobile { display:none !important; }
  .hide-desktop { display:block !important; }
  .wp-block-group.is-layout-flex.is-stack-on-mobile { flex-direction:column !important; flex-wrap:nowrap !important; }
  .wp-block-group.is-layout-flex.is-stack-on-mobile > * { width:100%; }
  .juicy-hero .wp-block-columns { flex-direction:column; }
  .juicy-hero .wp-block-column { flex-basis:100% !important; }
  .juicy-display-title { max-width: 9ch; }
  .juicy-bottle-scene { min-height: 500px; margin-top: 25px; }
  .juicy-service-grid > .wp-block-column { flex-basis:100% !important; }
  .juicy-service-card { min-height:270px; }
  .juicy-project-scroller { overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .juicy-project-scroller::-webkit-scrollbar { display:none; }
  .juicy-project-track { transform:none !important; }
  .juicy-project-card { flex-basis:86vw; min-height:520px; scroll-snap-align:center; }
  .juicy-project-media { min-height:240px; }
  .juicy-ai-nodes { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 520px) {
  .juicy-tech-card { width:145px; padding:10px 12px; }
  .juicy-tech-card--one { left:-3%; top:10%; }
  .juicy-tech-card--two { right:-4%; top:36%; }
  .juicy-tech-card--three { left:-1%; bottom:9%; }
  .juicy-code-chip,.juicy-cursor-chip { width:52px; height:52px; }
  .juicy-project-card { flex-basis:91vw; border-radius:26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .juicy-project-track { transform:none !important; }
  .juicy-wave-bottom::after { animation:none !important; transform:translate3d(0,38%,0) !important; }
  .juicy-wave-top::before { animation:none !important; transform:translate3d(0,-38%,0) rotate(180deg) !important; }
}

/* Juicy Core dynamic content blocks */
.jd-empty-state {
  max-width: 780px;
  margin: 48px auto 0;
  padding: 22px 26px;
  border: 2px dashed currentColor;
  border-radius: 20px;
  text-align: center;
  opacity: .72;
}

.jd-service-grid-dynamic {
  width: min(100% - 40px, var(--wp--style--global--wide-size, 1320px));
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.jd-service-card {
  min-height: 330px;
  padding: clamp(26px, 3vw, 42px);
  border: 2px solid var(--wp--preset--color--ink, #172326);
  border-radius: 32px;
  background: var(--jd-accent, #43C5F2);
  color: var(--wp--preset--color--ink, #172326);
  box-shadow: 9px 9px 0 var(--wp--preset--color--ink, #172326);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.jd-service-card h3 {
  margin: auto 0 16px;
  font-family: var(--wp--preset--font-family--juicy-display, Anton, sans-serif);
  font-size: clamp(2.1rem, 3.8vw, 4rem);
  line-height: .95;
  letter-spacing: -.035em;
}
.jd-service-card h3 a,
.jd-project-card h3 a,
.jd-post-card h3 a { color: inherit; text-decoration: none; }
.jd-card-eyebrow {
  margin: 0 0 18px;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.jd-card-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 18px;
  color: inherit;
  font-weight: 850;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.jd-project-scroller {
  display: flex;
  gap: 28px;
  width: max-content;
  max-width: none;
  margin: 64px 0 0;
  padding: 10px clamp(20px, 4vw, 56px) 44px;
  align-items: stretch;
}
.jd-project-card {
  flex: 0 0 min(72vw, 900px);
  min-width: min(72vw, 900px);
  min-height: 620px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 38px;
  background: var(--jd-accent, #FF3F7F);
  color: #172326;
  box-shadow: 12px 12px 0 rgba(0,0,0,.22);
  display: grid;
  grid-template-rows: minmax(300px, 1.15fr) auto;
}
.jd-project-image { display:block; min-height: 320px; overflow:hidden; background:rgba(255,255,255,.18); }
.jd-project-image img { width:100%; height:100%; min-height:320px; object-fit:cover; display:block; transition:transform .5s ease; }
.jd-project-copy { padding: clamp(26px, 3.4vw, 48px); }
.jd-project-copy h3 {
  margin: 0 0 18px;
  font-family: var(--wp--preset--font-family--juicy-display, Anton, sans-serif);
  font-size: clamp(2.4rem, 4.6vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.04em;
}
.jd-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.jd-tags span { padding:7px 10px; border:1.5px solid currentColor; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.jd-post-grid {
  width: min(100%, var(--wp--style--global--wide-size, 1320px));
  margin: 58px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.jd-post-card {
  overflow: hidden;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,.45);
  background: #fff;
  color: #172326;
  box-shadow: 8px 8px 0 rgba(0,0,0,.18);
}
.jd-post-image { display:block; aspect-ratio: 4 / 3; overflow:hidden; background:#f4eddf; }
.jd-post-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.jd-post-copy { padding: clamp(24px, 3vw, 38px); }
.jd-post-copy h3 { margin: 0 0 14px; font-size: clamp(1.8rem, 2.7vw, 3rem); line-height: 1; }

.jd-faq-list {
  width: min(100%, var(--wp--style--global--wide-size, 1320px));
  margin: 56px auto 0;
  border-top: 2px solid #172326;
}
.jd-faq-item { border-bottom: 2px solid #172326; }
.jd-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 28px 64px 28px 0;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight: 850;
}
.jd-faq-item summary::-webkit-details-marker { display:none; }
.jd-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 2px solid #172326;
  border-radius: 50%;
  font: 800 1.4rem/1 var(--wp--preset--font-family--juicy-sans, Inter, sans-serif);
}
.jd-faq-item[open] summary::after { content: '−'; }
.jd-faq-answer { max-width: 860px; padding: 0 64px 28px 0; }
.jd-faq-answer > :first-child { margin-top:0; }
.jd-faq-answer > :last-child { margin-bottom:0; }

.juicy-contact-form {
  width: min(100%, 860px);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 46px);
  border: 2px solid #172326;
  border-radius: 30px;
  background: rgba(255,255,255,.72);
  box-shadow: 10px 10px 0 rgba(23,35,38,.88);
  text-align: left;
}

/* Single/archive templates for Projects and Services */
.juicy-entry-shell { padding-block: clamp(80px, 10vw, 150px); }
.juicy-entry-shell .wp-block-post-title { max-width: 12ch; }
.juicy-entry-meta { font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* Dynamic block editor placeholder */
.editor-styles-wrapper .juicy-dynamic-block-preview {
  padding: 22px;
  border: 2px dashed #777;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
}

@media (hover:hover) and (pointer:fine) {
  .jd-service-card:hover { transform:translate(-4px,-4px) rotate(-.5deg); box-shadow:14px 14px 0 #172326; }
  .jd-project-card:hover .jd-project-image img,
  .jd-post-card:hover .jd-post-image img { transform:scale(1.035); }
}

@media (max-width: 980px) {
  .jd-service-grid-dynamic { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jd-post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jd-post-card:last-child:nth-child(odd) { grid-column:1 / -1; }
}

@media (max-width: 781px) {
  .jd-service-grid-dynamic,
  .jd-post-grid { grid-template-columns:1fr; width:min(100% - 32px, 680px); }
  .jd-post-card:last-child:nth-child(odd) { grid-column:auto; }
  .jd-project-scroller { width:100%; max-width:100%; overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:16px; }
  .jd-project-card { flex-basis:88vw; min-width:88vw; min-height:500px; scroll-snap-align:center; border-radius:28px; }
  .jd-project-copy h3 { font-size:clamp(2.2rem, 11vw, 4.2rem); }
}

/* =========================================================
   JUICY DIGITAL v1.4 — DRINK SERVICES + PROJECT FACTS
   Inspired by the flavour/product language the site is built around,
   while keeping the content semantic and Gutenberg/CPT driven.
   ========================================================= */

/* Services section gets the bright full-colour Sayian-style treatment. */
.juicy-services {
  background:
    radial-gradient(circle at 8% 25%, rgba(255,255,255,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.14) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 74%, rgba(255,255,255,.15) 0 3px, transparent 4px),
    var(--wp--preset--color--lemon) !important;
  background-size: 92px 92px, 140px 140px, 78px 78px, auto;
}
.juicy-services::before {
  content:'';
  position:absolute;
  inset:auto -8% -7vw;
  height:15vw;
  min-height:110px;
  border-radius:50% 50% 0 0 / 35% 35% 0 0;
  background:var(--wp--preset--color--pool-blue);
  transform:rotate(-1.2deg);
  z-index:1;
}

/* Services are now presented as a horizontal drinks shelf, not generic cards. */
.jd-service-shelf {
  width:100%;
  max-width:100%;
  margin:clamp(54px,7vw,90px) auto 0;
  padding:16px clamp(20px,4vw,56px) clamp(70px,8vw,110px);
  display:flex;
  gap:clamp(24px,3vw,42px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.jd-service-shelf::-webkit-scrollbar { display:none; }
.jd-service-drink {
  --can-dark: color-mix(in srgb, var(--jd-accent) 76%, #172326 24%);
  --can-light: color-mix(in srgb, var(--jd-accent) 68%, #fff 32%);
  flex:0 0 clamp(320px,30vw,440px);
  scroll-snap-align:center;
  display:grid;
  grid-template-rows:minmax(390px,1fr) auto;
  color:#172326;
  position:relative;
}
.jd-service-can-link {
  min-height:390px;
  display:grid;
  place-items:end center;
  position:relative;
  text-decoration:none;
  color:inherit;
  isolation:isolate;
}
.jd-service-can {
  position:relative;
  width:clamp(180px,15vw,230px);
  aspect-ratio:.54 / 1;
  border-radius:22% 22% 14% 14% / 7% 7% 5% 5%;
  background:
    linear-gradient(95deg, rgba(255,255,255,.3), transparent 14% 73%, rgba(0,0,0,.14)),
    linear-gradient(180deg, var(--can-light), var(--jd-accent) 32%, var(--can-dark));
  border:2px solid rgba(23,35,38,.28);
  box-shadow:0 34px 35px rgba(90,55,0,.22), inset 8px 0 14px rgba(255,255,255,.18), inset -8px 0 14px rgba(0,0,0,.08);
  transform:rotate(-2.5deg);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  overflow:hidden;
  z-index:4;
}
.jd-service-drink:nth-child(even) .jd-service-can { transform:rotate(3deg); }
.jd-service-can::before {
  content:'';
  position:absolute;
  inset:8% -25% auto;
  height:32%;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 8px, transparent 8px 22px);
  transform:rotate(-6deg);
}
.jd-service-can::after {
  content:'';
  position:absolute;
  left:-20%; right:-20%; bottom:-8%; height:31%;
  border-radius:50% 50% 0 0;
  background:rgba(255,255,255,.12);
  transform:rotate(8deg);
}
.jd-service-can__rim {
  position:absolute;
  left:3%; right:3%; top:-1.5%; height:7%;
  border-radius:50%;
  background:linear-gradient(#f9f9f7,#8d9698 42%,#e9efef 54%,#788285 100%);
  border:1px solid rgba(23,35,38,.36);
  box-shadow:0 3px 0 rgba(23,35,38,.14);
  z-index:7;
}
.jd-service-can__rim::after {
  content:'';
  position:absolute;
  width:28%; aspect-ratio:1.8/1;
  left:36%; top:18%; border:2px solid #5c6566;
  border-radius:50%;
  box-shadow:inset 0 0 0 3px #bec6c6;
}
.jd-service-can__shine {
  position:absolute;
  inset:5% auto 4% 8%; width:13%;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(255,255,255,.38),rgba(255,255,255,0));
  z-index:3;
}
.jd-service-can__brand {
  position:absolute;
  top:12%; left:12%;
  z-index:6;
  color:#fff;
  font:900 clamp(.9rem,1vw,1.05rem)/.8 var(--wp--preset--font-family--juicy-sans,Inter,sans-serif);
  letter-spacing:-.07em;
  transform:rotate(-2deg);
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.jd-service-can__brand small { display:block; font-size:.52em; letter-spacing:.02em; font-weight:700; }
.jd-service-can__name {
  position:absolute;
  left:8%; right:8%; top:32%;
  z-index:6;
  color:#fff;
  font:400 clamp(2.2rem,3.3vw,4.2rem)/.82 Georgia,'Times New Roman',serif;
  font-style:italic;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 2px 1px rgba(0,0,0,.13);
}
.jd-service-can__tech {
  position:absolute;
  left:50%; bottom:17%;
  translate:-50% 0;
  z-index:6;
  min-width:74px;
  padding:9px 12px;
  border:2px solid rgba(255,255,255,.92);
  color:#fff;
  text-align:center;
  border-radius:12px;
  font:900 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.05em;
  background:rgba(23,35,38,.13);
  backdrop-filter:blur(4px);
}
.jd-service-can__micro {
  position:absolute;
  left:0; right:0; bottom:7%; z-index:6;
  color:#fff; text-align:center;
  font-size:.48rem; font-weight:900; letter-spacing:.14em;
}
.jd-service-fruit {
  position:absolute;
  width:100px; aspect-ratio:1;
  border-radius:55% 45% 55% 45%;
  background:color-mix(in srgb, var(--jd-accent) 58%, #fff 42%);
  border:11px solid color-mix(in srgb, var(--jd-accent) 82%, #172326 18%);
  opacity:.9;
  z-index:2;
}
.jd-service-fruit::after {
  content:''; position:absolute; width:46%; height:22%;
  background:#67a52f; border-radius:100% 0 100% 0;
  top:-27%; left:46%; transform:rotate(-22deg);
}
.jd-service-fruit--a { left:5%; bottom:22%; transform:rotate(-22deg) scale(.76); }
.jd-service-fruit--b { right:3%; top:14%; transform:rotate(30deg) scale(.52); }
.jd-service-facts {
  margin-top:-18px;
  padding:34px 22px 24px;
  border:2px solid #172326;
  border-radius:24px;
  background:rgba(255,255,255,.74);
  box-shadow:7px 7px 0 #172326;
  position:relative;
  z-index:8;
  backdrop-filter:blur(10px);
}
.jd-service-facts .jd-card-eyebrow { margin-bottom:9px; opacity:.72; }
.jd-service-facts h3 {
  margin:0;
  font-family:var(--wp--preset--font-family--juicy-display,Anton,sans-serif);
  font-size:clamp(2rem,3vw,3.4rem);
  line-height:.93;
  text-transform:uppercase;
}
.jd-service-facts h3 a { color:inherit; text-decoration:none; }
.jd-nutrition-rule {
  border-top:3px solid #172326;
  border-bottom:1px solid #172326;
  margin:18px 0 0;
  padding:8px 0;
}
.jd-nutrition-rule strong { display:block; font-size:.95rem; text-transform:uppercase; }
.jd-nutrition-rule span { display:block; font-size:.67rem; opacity:.7; }
.jd-ingredient-list { list-style:none; padding:0; margin:0; }
.jd-ingredient-list li {
  display:grid; grid-template-columns:1fr auto; gap:12px;
  border-bottom:1px solid rgba(23,35,38,.5);
  padding:7px 0;
  font-size:.79rem;
}
.jd-ingredient-list b { font-size:.72rem; }
.jd-service-excerpt { margin:14px 0 0; font-size:.84rem; line-height:1.45; }
.jd-pill-link {
  padding:10px 15px;
  border:1.5px solid currentColor;
  border-radius:999px;
  border-bottom:1.5px solid currentColor !important;
  background:#fff;
}
@media (hover:hover) and (pointer:fine) {
  .jd-service-can-link:hover .jd-service-can { transform:translateY(-13px) rotate(-5deg) scale(1.035); filter:saturate(1.12); }
  .jd-service-drink:nth-child(even) .jd-service-can-link:hover .jd-service-can { transform:translateY(-13px) rotate(5deg) scale(1.035); }
}

/* Portfolio cards use a nutrition-label language for the technical facts. */
.jd-project-scroller { gap:clamp(28px,4vw,58px); }
.jd-project-card {
  flex-basis:min(86vw,1180px);
  min-width:min(86vw,1180px);
  min-height:640px;
  display:block;
  padding:clamp(18px,2vw,26px);
  background:linear-gradient(145deg, color-mix(in srgb,var(--jd-accent) 92%,#fff 8%), color-mix(in srgb,var(--jd-accent) 72%,#fff 28%));
  border-color:rgba(255,255,255,.5);
}
.jd-project-card__layout {
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.62fr);
  gap:clamp(20px,3vw,38px);
  align-items:stretch;
}
.jd-project-card__main {
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:26px;
  background:rgba(255,255,255,.12);
}
.jd-project-card .jd-project-image {
  min-height:370px;
  flex:1 1 auto;
  border-radius:0;
}
.jd-project-card .jd-project-image img { min-height:370px; }
.jd-project-card .jd-project-copy { padding:clamp(24px,3vw,40px); }
.jd-project-card .jd-project-copy h3 { margin-bottom:12px; }
.jd-project-nutrition {
  align-self:stretch;
  padding:clamp(22px,2.7vw,34px);
  background:#fff9f2;
  color:#172326;
  border:2px solid #172326;
  border-radius:24px;
  box-shadow:7px 7px 0 rgba(23,35,38,.94);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.jd-project-nutrition__head {
  border-bottom:5px solid #172326;
  padding-bottom:10px;
  margin-bottom:4px;
}
.jd-project-nutrition__head strong {
  display:block;
  font-family:var(--wp--preset--font-family--juicy-display,Anton,sans-serif);
  font-size:clamp(2rem,3.6vw,4rem);
  line-height:.9;
  text-transform:uppercase;
}
.jd-project-nutrition__head span { display:block; margin-top:8px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.jd-project-fact-row {
  display:grid;
  grid-template-columns:minmax(80px,.75fr) minmax(0,1.25fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1.5px solid #172326;
  align-items:start;
}
.jd-project-fact-row span { font-size:.72rem; font-weight:700; text-transform:uppercase; }
.jd-project-fact-row b { font-size:.82rem; line-height:1.35; overflow-wrap:anywhere; }
.jd-project-nutrition__foot {
  margin-top:auto;
  padding-top:24px;
  font-weight:800;
  font-size:.9rem;
}
.jd-project-nutrition--single { height:100%; min-height:100%; }
.juicy-project-single .wp-block-post-featured-image { height:100%; min-height:480px; margin:0; }
.juicy-project-single .wp-block-post-featured-image img { width:100%; height:100%; min-height:480px; object-fit:cover; }

/* Add some product-style floating decorative circles to the work reel. */
.juicy-work-section::before {
  content:'';
  position:absolute;
  inset:10% 0 auto;
  height:70%;
  background:
    radial-gradient(circle at 8% 28%, rgba(255,255,255,.09) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 12%, rgba(159,225,73,.15) 0 10px, transparent 11px),
    radial-gradient(circle at 88% 64%, rgba(255,79,154,.13) 0 14px, transparent 15px);
  background-size:110px 110px,180px 180px,220px 220px;
  pointer-events:none;
  z-index:0;
}

@media (max-width:980px) {
  .jd-service-drink { flex-basis:clamp(310px,46vw,390px); }
  .jd-project-card { flex-basis:92vw; min-width:92vw; }
  .jd-project-card__layout { grid-template-columns:1fr; }
  .jd-project-nutrition { min-height:360px; }
}
@media (max-width:781px) {
  .jd-service-shelf { padding-inline:16px; }
  .jd-service-drink { flex-basis:84vw; min-width:84vw; }
  .jd-service-can-link { min-height:350px; }
  .jd-service-can { width:190px; }
  .jd-project-card { flex-basis:91vw; min-width:91vw; padding:14px; }
  .jd-project-card__layout { min-height:0; }
  .jd-project-card .jd-project-image,
  .jd-project-card .jd-project-image img { min-height:260px; }
  .jd-project-nutrition { border-radius:20px; }
  .juicy-project-single .wp-block-columns { flex-direction:column; }
  .juicy-project-single .wp-block-column { flex-basis:100% !important; }
  .juicy-project-single .wp-block-post-featured-image,
  .juicy-project-single .wp-block-post-featured-image img { min-height:300px; }
}

/* =========================================================
   JUICY DIGITAL v1.6 — PRODUCT WORLD / FLAVOUR SYSTEM
   ========================================================= */

/* The services are the product shelf: bright, full-bleed, drink-first. */
.juicy-services {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#ff315f 0%,#ff4f9a 42%,#ff7a1a 100%) !important;
  color: #fff !important;
}
.juicy-services::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 22% 74%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 61% 19%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 86% 58%, #fff 0 6px, transparent 7px);
  background-size:125px 125px,190px 190px,110px 110px,230px 230px;
}
.juicy-services > * { position:relative; z-index:2; }
.juicy-services .jd-service-shelf { padding-bottom:clamp(85px,10vw,140px); }
.juicy-services .jd-service-facts {
  background:rgba(255,248,238,.95);
  color:#172326;
}
.juicy-services .jd-service-can { width:clamp(205px,16vw,255px); filter:saturate(1.12); }
.juicy-services .jd-service-can-link { min-height:430px; }
.juicy-services .jd-service-fruit { box-shadow:0 16px 28px rgba(80,30,15,.18); }

/* Hero nutrition panel: small enough to feel like packaging, not another card. */
.juicy-bottle-scene { min-height:640px; }
.juicy-hero-nutrition {
  position:absolute;
  right:-7%;
  bottom:4%;
  width:min(260px,42%);
  padding:20px 20px 18px;
  background:rgba(255,248,238,.94);
  color:#172326;
  border:2px solid #172326;
  border-radius:18px;
  box-shadow:7px 7px 0 rgba(23,35,38,.9);
  transform:rotate(2.5deg);
  z-index:11;
}
.juicy-hero-nutrition__head { border-bottom:5px solid #172326; padding-bottom:8px; }
.juicy-hero-nutrition__head strong { display:block; font:900 1.4rem/.9 var(--wp--preset--font-family--juicy-display,Anton,sans-serif); text-transform:uppercase; }
.juicy-hero-nutrition__head span { font-size:.64rem; font-weight:800; text-transform:uppercase; }
.juicy-hero-nutrition__row { display:grid; grid-template-columns:1fr auto; gap:12px; padding:7px 0; border-bottom:1px solid #172326; font-size:.72rem; }
.juicy-hero-nutrition__row b { font-weight:900; }
.juicy-hero-nutrition p { margin:12px 0 0; font-size:.72rem; font-weight:800; }

/* Sayian-inspired editorial yellow section, but the imagery is explicitly tech. */
.juicy-different {
  --juicy-wave-colour: var(--wp--preset--color--ink);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 22%,rgba(255,122,26,.12) 0 5px,transparent 6px),
    radial-gradient(circle at 80% 68%,rgba(255,79,154,.11) 0 7px,transparent 8px),
    #ffe238 !important;
  background-size:110px 110px,180px 180px,auto;
}
.juicy-photo-stack { position:relative; min-height:560px; }
.juicy-photo-card {
  position:absolute;
  width:clamp(190px,22vw,320px);
  aspect-ratio:4/5;
  border:14px solid #fff;
  border-bottom-width:52px;
  box-shadow:0 28px 48px rgba(23,35,38,.2);
  display:grid;
  place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:900;
  overflow:hidden;
}
.juicy-photo-card span { font-size:clamp(3rem,7vw,7rem); }
.juicy-photo-card small { position:absolute; bottom:-37px; left:14px; color:#172326; font:900 .7rem/1 Inter,sans-serif; letter-spacing:.12em; }
.juicy-photo-card--one { left:0; top:10%; transform:rotate(-9deg); background:linear-gradient(145deg,#48c8f2,#7b52d3); color:#fff; }
.juicy-photo-card--two { right:4%; top:0; transform:rotate(8deg); background:linear-gradient(145deg,#ff4f9a,#ff7a1a); color:#fff; }
.juicy-photo-card--three { left:24%; bottom:0; transform:rotate(2deg); background:#172326; color:#9fe149; }
.juicy-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.juicy-stat-row div { text-align:center; }
.juicy-stat-row b { width:92px; aspect-ratio:1; margin:auto; display:grid; place-items:center; border:2px solid #ff4f9a; border-radius:50%; color:#ff4f9a; font:900 2rem/1 var(--wp--preset--font-family--juicy-display,Anton,sans-serif); }
.juicy-stat-row span { display:block; margin-top:10px; font-size:.76rem; font-weight:800; }

/* Split comparison inspired by packaging comparison tables. */
.juicy-comparison { overflow:hidden; }
.juicy-compare { margin-top:48px; min-height:420px; display:grid; grid-template-columns:1fr 180px 1fr; border:2px solid #172326; }
.juicy-compare__side { padding:clamp(30px,4vw,60px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.juicy-compare__side small { font-weight:900; letter-spacing:.12em; }
.juicy-compare__side strong { font:900 clamp(2.4rem,5vw,5.4rem)/.9 var(--wp--preset--font-family--juicy-display,Anton,sans-serif); text-transform:uppercase; }
.juicy-compare__side span { border-top:1px solid currentColor; padding-top:12px; font-weight:700; }
.juicy-compare__side--juicy { background:#ff4b57; color:#fff; }
.juicy-compare__side--other { background:#f5a1d7; color:#172326; }
.juicy-compare__centre { display:grid; place-items:center; background:linear-gradient(90deg,#ff4b57 0 50%,#f5a1d7 50%); }
.juicy-compare__badge { width:150px; aspect-ratio:1; display:grid; place-items:center; text-align:center; background:#fff8ee; color:#172326; border-radius:50%; border:2px solid #172326; box-shadow:5px 5px 0 #172326; font:900 1.55rem/.9 var(--wp--preset--font-family--juicy-display,Anton,sans-serif); transform:rotate(-7deg); }

/* Portfolio cards should feel like product pages: image + facts, not generic cards. */
.juicy-work-section { --juicy-wave-colour:#f5a1d7; }
.jd-project-card { border-radius:34px; overflow:visible; }
.jd-project-card__main { box-shadow:0 20px 50px rgba(0,0,0,.22); }
.jd-project-nutrition { transform:rotate(1deg); }
.jd-project-card:nth-child(even) .jd-project-nutrition { transform:rotate(-1deg); }

@media (max-width: 900px) {
  .juicy-bottle-scene { min-height:520px; }
  .juicy-hero-nutrition { right:0; width:220px; }
  .juicy-photo-stack { min-height:440px; }
  .juicy-stat-row { grid-template-columns:repeat(3,1fr); }
  .juicy-compare { grid-template-columns:1fr; }
  .juicy-compare__centre { min-height:100px; background:linear-gradient(#ff4b57 0 50%,#f5a1d7 50%); }
}
@media (max-width: 600px) {
  .juicy-hero-nutrition { position:relative; right:auto; bottom:auto; width:auto; margin:22px auto 0; transform:rotate(1deg); }
  .juicy-bottle-scene { min-height:auto; padding-bottom:0; }
  .juicy-photo-stack { min-height:390px; }
  .juicy-photo-card { width:190px; border-width:9px; border-bottom-width:42px; }
  .juicy-photo-card--two { right:-10px; }
  .juicy-stat-row { grid-template-columns:1fr; gap:22px; }
  .juicy-stat-row div { display:grid; grid-template-columns:76px 1fr; align-items:center; text-align:left; gap:14px; }
  .juicy-stat-row b { width:76px; margin:0; }
  .juicy-stat-row span { margin:0; }
  .juicy-compare__side { padding:30px 24px; }
  .juicy-compare__centre { min-height:90px; }
  .juicy-compare__badge { width:120px; font-size:1.3rem; }
}

/* v1.9 — proof / conversion stats */
.juicy-proof{position:relative;overflow:hidden;--juicy-wave-colour:var(--wp--preset--color--soft-pink)}
.juicy-proof:before{content:"";position:absolute;width:280px;height:280px;border:2px solid rgba(23,35,38,.16);border-radius:50%;right:-80px;top:45px;box-shadow:0 0 0 34px rgba(255,255,255,.08),0 0 0 70px rgba(255,255,255,.06);pointer-events:none}
.jd-proof-stats{width:min(1200px,calc(100% - 40px));margin:54px auto 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.jd-proof-stat{min-height:250px;background:#fff;border:3px solid #172326;border-radius:34px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:10px 10px 0 #172326;transform:rotate(-1deg)}
.jd-proof-stat:nth-child(even){transform:rotate(1.2deg);background:var(--wp--preset--color--soft-pink)}
.jd-proof-stat:nth-child(3){background:var(--wp--preset--color--pool-blue)}
.jd-proof-stat:nth-child(4){background:var(--wp--preset--color--lime)}
.jd-proof-stat strong{font-family:Anton,Impact,sans-serif;font-size:clamp(64px,8vw,118px);font-weight:400;line-height:.85;letter-spacing:-.035em}
.jd-proof-stat span{font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.25;max-width:16ch}
.juicy-proof-note{font-weight:700;opacity:.72}
@media(max-width:900px){.jd-proof-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.jd-proof-stat{min-height:210px}}
@media(max-width:520px){.jd-proof-stats{grid-template-columns:1fr}.jd-proof-stat{min-height:180px;transform:none!important}.jd-proof-stat strong{font-size:72px}}