.df-community-story{background:#f6f3fc;color:#1b1238;padding:36px 0 80px;overflow:hidden;position:relative}
.df-story-banner{max-width:860px;margin:0 auto 26px;position:relative;padding:0 20px}
.df-story-banner>img{width:100%;height:auto;max-height:380px;object-fit:cover;border-radius:6px;display:block}
.df-story-banner>span{display:block;text-align:center;font-size:12px;font-weight:700;letter-spacing:2px;margin-top:12px;color:#352369}
.df-story-gallery{width:100%;overflow:hidden;padding:16px 0 12px;position:relative;z-index:1;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.df-story-photo-row{display:flex;width:max-content;animation:df-story-scroll 65s linear infinite;margin-bottom:10px}
.df-story-photo-row.reverse{animation-direction:reverse;margin-bottom:0}
.df-story-photo-group{display:flex;gap:10px;padding-right:10px;flex-shrink:0}
.df-story-photo-group img{height:clamp(150px,19vw,280px);width:auto;max-width:360px;object-fit:cover;display:block;border-radius:6px}
.df-story-controls{max-width:1160px;margin:0 auto;text-align:right;padding:0 24px}
.df-story-controls button{font:12px ReplicaInter,Arial,sans-serif;color:#352369;background:transparent;border:1px solid #cfc4e1;border-radius:20px;min-height:38px;padding:8px 14px;cursor:pointer}
.df-story-inner{max-width:1100px;margin:54px auto 0;padding:0 24px}
.reference-replica .df-story-heading>p{font:clamp(23px,3vw,42px)/1.2 Podium,sans-serif;text-align:center;margin:0 0 20px;color:#352369}
.reference-replica .df-story-heading h2{font:clamp(42px,6vw,82px)/1.04 Podium,sans-serif;text-align:center;max-width:1050px;margin:0 auto 48px;letter-spacing:-.5px}
.df-community-story .df-story-heading{display:block;height:auto;min-height:0;padding:0;background:transparent;border:0;box-shadow:none}
.df-story-heading em{font:inherit;font-style:normal;color:#a13789}
.df-story-letter{max-width:900px;margin:0 auto;font:20px/1.65 ReplicaInter,Arial,sans-serif;display:flow-root}
.df-story-byline{display:flex;align-items:center;gap:14px;font-size:16px;margin-bottom:30px}
.df-story-byline>img{border-radius:10px;object-fit:contain;background:white}
.df-story-byline strong{display:block}.df-story-byline small{font-size:13px;color:#76698a}
.df-story-doctor{float:right;width:230px;height:260px;object-fit:cover;object-position:top;margin:0 0 24px 40px;border-radius:4px}
.reference-replica .df-story-letter p{font-size:20px;line-height:1.65;margin:0 0 22px}
.reference-replica .df-story-letter .df-story-emphasis{font-weight:700;border-left:4px solid #a13789;padding-left:22px;color:#352369;clear:both}
.df-story-highlights{margin:60px auto 0;max-width:1000px;text-align:center}
.reference-replica .df-story-kicker{font:28px/1.2 Podium,sans-serif;color:#a13789;margin:0 0 16px;letter-spacing:.6px}
.reference-replica .df-story-highlights h3{font:clamp(34px,4.2vw,54px)/1.1 Podium,sans-serif;margin:0 auto 35px;max-width:850px}
.df-story-highlights ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;text-align:left}
.df-story-highlights li{display:flex;align-items:center;gap:22px;min-height:118px}
.df-story-highlights li:last-child{grid-column:1/-1;max-width:490px;margin:auto}
.df-story-highlights svg{width:90px;height:90px;flex:0 0 90px;color:#a13789;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.df-story-highlights strong{font-size:21px;line-height:1.3;display:block;color:#352369}
.df-story-highlights span{font-size:16px;line-height:1.5;display:block;margin-top:6px;color:#675879}
.df-story-cta{text-align:center;margin:44px auto 0;max-width:780px}
.reference-replica .df-story-cta p{font-size:13px;line-height:1.5;margin:14px 0 0;color:#675879}
.df-story-highlights .draw{stroke-dasharray:160;animation:df-story-draw 3.4s ease-in-out infinite}
.df-story-highlights .ripple{transform-origin:48px 45px;animation:df-story-ripple 2.2s ease-out infinite}
.df-story-highlights .scan{transform-origin:48px 45px;animation:df-story-spin 3s linear infinite}
.df-story-highlights .grow{transform-origin:center 78px;animation:df-story-grow 3.4s ease-out infinite}
.df-story-highlights .two{animation-delay:.45s}.df-story-highlights .three{animation-delay:.9s}
.df-community-story.is-paused *{animation-play-state:paused!important}
@keyframes df-story-scroll{to{transform:translateX(-50%)}}
@keyframes df-story-draw{0%{stroke-dashoffset:160;opacity:.2}45%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.2}}
@keyframes df-story-ripple{from{transform:scale(.5);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes df-story-spin{to{transform:rotate(360deg)}}
@keyframes df-story-grow{0%{transform:scaleY(.15);opacity:.25}30%,80%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);opacity:.25}}
@media(max-width:767px){.df-community-story{padding:24px 0 44px}.df-story-banner{padding:0 16px}.df-story-banner>span{font-size:10px}.df-story-inner{margin-top:30px;padding:0 22px}.reference-replica .df-story-heading h2{margin-bottom:30px}.df-story-doctor{width:120px;height:160px;margin:0 0 15px 20px}.reference-replica .df-story-letter p{font-size:17px;line-height:1.65;margin-bottom:18px}.df-story-byline{font-size:14px}.df-story-highlights{margin-top:35px}.df-story-highlights ul{grid-template-columns:1fr;gap:16px}.df-story-highlights li{min-height:85px;gap:14px}.df-story-highlights li:last-child{max-width:none;margin:0}.df-story-highlights svg{width:65px;height:65px;flex-basis:65px}.df-story-highlights strong{font-size:18px}.df-story-highlights span{font-size:14px}.reference-replica .df-story-kicker{font-size:23px}.df-story-cta .r-button{font-size:30px}.df-story-controls button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.df-community-story *{animation:none!important}.df-story-photo-row{width:100%}.df-story-photo-group{flex-wrap:wrap;justify-content:center;padding:0 12px;gap:10px;width:100%}.df-story-photo-group[aria-hidden],.df-story-photo-row.reverse,.df-story-controls{display:none}.df-story-photo-group img{height:100px;max-width:180px}.df-story-highlights .ripple{opacity:.3}}

.df-story-gallery:hover .df-story-photo-row,.df-story-gallery:focus-within .df-story-photo-row{animation-play-state:paused}
/* Logo emblem: glass coin spinning in 3D, centred on the pink line, with its label just below. */
#df-community-story{padding-top:0;--coin:clamp(112px,12vw,190px)}
.df-story-sign-band{position:relative;z-index:3;height:calc(var(--coin)/2 + 30px);background:#352369;border-bottom:6px solid #da3f96}
.df-emblem{display:flex;flex-direction:column;align-items:center;gap:12px}
.df-emblem-stage{position:absolute;left:50%;bottom:-3px;width:var(--coin);aspect-ratio:1;perspective:900px;transform:translate(-50%,50%)}
.df-emblem-stage::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,#da3f9680 0,#7b5cff40 45%,transparent 68%);filter:blur(10px);animation:df-emblem-glow 3s ease-in-out infinite}
.df-emblem-coin{position:absolute;inset:0;transform-style:preserve-3d;animation:df-emblem-spin 7s linear infinite}
.df-emblem-face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 background:radial-gradient(circle at 32% 24%,#fffffff2 0,#f5effcd9 42%,#e4d8f5c7 70%,#c9b5e6b8 100%);
 border:2px solid #ffffffbf;
 box-shadow:inset 0 0 0 1px #ffffff80,inset 0 12px 22px #ffffffb3,inset 0 -14px 26px #a1378947,0 0 16px #da3f96b3,0 0 38px #7b5cff73}
.df-emblem-back{transform:rotateY(180deg)}
.df-emblem-face img{position:relative;z-index:1;width:64%;height:auto;filter:drop-shadow(0 4px 6px #35236959)}
/* Glass: a fixed top highlight plus a moving light sweep. */
.df-emblem-face::before{content:"";position:absolute;z-index:2;left:14%;right:14%;top:5%;height:40%;border-radius:50%;background:linear-gradient(#ffffffb8,#ffffff00)}
.df-emblem-face::after{content:"";position:absolute;z-index:2;inset:-25%;background:linear-gradient(115deg,transparent 38%,#ffffffd9 49%,#ffffff40 55%,transparent 63%);transform:translateX(-75%);animation:df-emblem-sheen 3.5s ease-in-out infinite}
#df-community-story .df-emblem-text{position:absolute;left:50%;top:calc(100% + 3px + var(--coin)/2 + 12px);transform:translateX(-50%);margin:0;padding:8px 20px;border-radius:999px;white-space:nowrap;font:clamp(17px,1.9vw,28px)/1 Podium,Impact,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#fff;text-shadow:0 0 10px #ffffffa6;
 background:linear-gradient(135deg,#352369eb,#a13789eb);border:1px solid #ffffff59;box-shadow:inset 0 1px 0 #ffffff66,0 0 14px #da3f9699,0 6px 16px #1b123866}
@keyframes df-emblem-spin{to{transform:rotateY(360deg)}}
@keyframes df-emblem-sheen{0%,25%{transform:translateX(-75%)}65%,100%{transform:translateX(75%)}}
@keyframes df-emblem-glow{50%{opacity:.55;transform:scale(1.08)}}
#df-community-story .df-story-gallery{margin-top:calc(var(--coin)/2 + clamp(50px,4.6vw,68px));padding-top:16px}
/* Marquee welcome sign overlapping the photo wall. */
#df-community-story .df-story-sign-band{height:clamp(140px,14vw,220px)}
.df-welcome-sign{position:absolute;z-index:4;width:min(520px,86vw);left:50%;bottom:0;transform:translate(-50%,44%);filter:drop-shadow(0 10px 10px #1b123844)}
.df-welcome-board{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;padding:42px 28px 30px;background:#fffdf7;border:9px solid #e4b74e;border-radius:45% 45% 45% 45% / 38% 38% 38% 38%;box-shadow:inset 0 0 0 3px #f7df92,0 0 0 3px #a77825;text-align:center}
.df-welcome-board::after{content:"";position:absolute;inset:-17px;border:5px dotted #ffe18a;border-radius:inherit;pointer-events:none}
.df-welcome-letters{position:absolute;z-index:2;top:-16px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.df-welcome-letters span{display:grid;place-items:center;width:clamp(32px,4vw,53px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#fff9df 60%,#d5cdaa);border:3px solid #c5b77d;box-shadow:inset 0 0 0 2px #fff,0 3px 4px #35236955;color:#a13789;font:700 clamp(22px,3vw,36px)/1 Arial,sans-serif}
.df-welcome-to{color:#352369;font:italic 600 clamp(17px,2.2vw,25px)/1.2 Georgia,serif;margin-bottom:8px}
.df-welcome-board strong{font:clamp(38px,5.5vw,64px)/.95 Podium,Impact,sans-serif;color:#a13789;letter-spacing:1px}
.df-welcome-brand{font:700 12px/1.2 ReplicaInter,Arial,sans-serif;color:#352369;letter-spacing:3px;margin-top:12px}
#df-community-story .df-story-gallery{margin-top:0;padding-top:10px}
@media(max-width:600px){.df-welcome-board{min-height:190px;padding:34px 20px 22px;border-width:7px}.df-welcome-sign{width:min(390px,86vw)}.df-welcome-brand{font-size:10px;letter-spacing:2px}}
/* Marquee upgrade: gold frame, bulb ring and a banner strip, in Doctor Farmer colours. */
.df-welcome-board{background:linear-gradient(#fffdf7,#fff6e4);border:10px solid transparent;background-origin:border-box;background-clip:padding-box,border-box;background-image:linear-gradient(#fffdf7,#fff6e4),linear-gradient(160deg,#f6d87f,#d9a326 45%,#f8e4a0 70%,#c08d1c);box-shadow:inset 0 0 0 3px #f7df92,inset 0 6px 18px #d9a32633,0 10px 26px #1b123840}
.df-welcome-board::after{border:7px dotted #ffe9a8;filter:drop-shadow(0 0 4px #ffd86b);animation:df-welcome-bulbs 1.6s steps(1) infinite}
.df-welcome-letters span{border-color:#d9a326;box-shadow:inset 0 0 0 2px #fff,0 3px 5px #35236966,0 0 10px #ffd86b80}
.df-welcome-brand{margin-top:14px;padding:6px 20px;border-radius:999px;color:#fffdf7;background:linear-gradient(#a13789,#7c2a6a);box-shadow:0 3px 8px #35236955,inset 0 1px 0 #ffffff55;font-size:13px;letter-spacing:3px}
@keyframes df-welcome-bulbs{50%{border-color:#ffd05e}}
@media(max-width:767px){.df-welcome-board{border-width:8px}.df-welcome-brand{padding:5px 14px;font-size:10px}}
/* Welcome sign image: supplied artwork replaces the coded marquee. */
.df-welcome-sign img{display:block;width:100%;height:auto}
.df-welcome-sign{filter:drop-shadow(0 12px 18px #1b123855)}

/* The band is exactly as tall as the part of the welcome sign that sits above the pink line,
   so the gap under the hero stays the hero's own bottom padding at every screen width.
   (Sign image is 1400x675 and hangs 44% below the line: 0.482 x 0.56 = 0.27 of its width.) */
#df-community-story .df-story-sign-band{height:calc(min(520px,86vw) * .27)}
@media(max-width:600px){#df-community-story .df-story-sign-band{height:calc(min(390px,86vw) * .27)}}

/* "Their life changed" video under "Before You Change Everything…": cover image, Vimeo player loads on tap (story-cards.js) */
.df-story-video{max-width:860px;margin:0 auto 44px}
.df-story-video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#1b1238;box-shadow:0 20px 50px #35236940,0 0 0 1px #eadff4}
.df-story-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.df-story-video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.df-story-video-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.df-story-video-poster:hover img{transform:scale(1.03)}
.df-story-video-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;background:#d8b43cf0;color:#1b1238;box-shadow:0 0 0 10px #d8b43c40,0 12px 30px #0007;animation:df-story-play-pulse 2.2s ease-in-out infinite}
.df-story-video-play svg{width:36px;height:36px;margin-left:5px}
.df-story-video-label{position:absolute;left:0;right:0;top:calc(50% + 58px);text-align:center;font:700 15px/1 ReplicaInter,Arial,sans-serif;letter-spacing:4px;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px #000c}
.df-story-video-poster:focus-visible{outline:3px solid #da3f96;outline-offset:3px}
@keyframes df-story-play-pulse{0%,100%{box-shadow:0 0 0 8px #d8b43c40,0 12px 30px #0007}50%{box-shadow:0 0 0 18px #d8b43c1a,0 12px 30px #0007}}
@media(prefers-reduced-motion:reduce){.df-story-video-play{animation:none}.df-story-video-poster img{transition:none}}
@media(max-width:767px){.df-story-video{margin:0 -6px 30px}.df-story-video-frame{border-radius:12px}.df-story-video-play{width:60px;height:60px;margin:-30px 0 0 -30px}.df-story-video-play svg{width:26px;height:26px}.df-story-video-label{top:calc(50% + 42px);font-size:10px;letter-spacing:2.5px}}

/* New welcome sign ("Your healthier life starts here") with glowing bulbs (welcome-sign.js places a light over each bulb) */
.df-welcome-sign img{display:block;width:100%;height:auto;animation:df-sign-warm 3.2s ease-in-out infinite}
.df-sign-lights{position:absolute;inset:0;pointer-events:none}
.df-sign-lights i{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 42% 38%,#fffef2 0%,#fff3b0 28%,#ffd84d 55%,#ffc21a00 72%);box-shadow:0 0 6px 2px #ffe27a,0 0 16px 5px #ffc93c99;mix-blend-mode:screen;opacity:.35;animation:df-sign-chase 1.75s ease-in-out infinite;animation-delay:calc(var(--i) * -.05s)}
/* Every other bulb runs half a beat behind, so the lights ripple around the frame */
.df-sign-lights i:nth-child(odd){animation-delay:calc(var(--i) * -.05s - .87s)}
@keyframes df-sign-chase{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.85)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes df-sign-warm{0%,100%{filter:drop-shadow(0 0 0 #ffd54a00)}50%{filter:drop-shadow(0 0 14px #ffd54a80)}}
@media(prefers-reduced-motion:reduce){.df-sign-lights i{animation:none;opacity:.85}.df-welcome-sign img{animation:none}}

/* The hero and the sign band meet on a fractional pixel, which can leave a hairline of the light page
   background between them. Overlap the band by 2px so no seam shows. */
#df-community-story .df-story-sign-band{margin-top:-2px;box-shadow:0 -2px 0 #352369}
/* Belt and braces for the same seam: the hero's purple reaches 3px further down, and the story section's
   own top edge is purple, so the light background can't show between them at any zoom or screen scaling. */
.reference-replica #hero{box-shadow:0 3px 0 #352369;position:relative;z-index:1}
#df-community-story{background-image:linear-gradient(#352369,#352369);background-repeat:no-repeat;background-size:100% 8px}
/* The story section hides overflow (for the scrolling photos), which clipped the top bulbs and glow of the sign.
   Make the band tall enough that the sign's top half, plus room for its glow, always sits inside the section.
   (Sign height = its width x 668/1400; 56% of it sits inside the band.) */
#df-community-story .df-story-sign-band{height:max(clamp(140px,14vw,220px),calc(min(520px,86vw) * .268 + 30px))}
@media(max-width:600px){#df-community-story .df-story-sign-band{height:max(clamp(140px,14vw,220px),calc(min(390px,86vw) * .268 + 26px))}}
/* Halve the gap between the hero's last line and the welcome sign (was ~63px desktop / ~54px phone). */
.reference-replica #hero.r-hero{padding-bottom:8px}
@media(max-width:767px){.reference-replica #hero.r-hero{padding-bottom:2px}}
/* Phones: size the sign band from the sign itself (not a 140px minimum) so the gap above the sign stays small,
   with ~14px left for the bulbs' glow. */
@media(max-width:767px){#df-community-story .df-story-sign-band{height:calc(min(520px,86vw) * .268 + 21px)}}
/* The sign itself is only the smaller phone size (390px) up to 600px wide, so match that here; between 601 and 767px
   it is still 520px wide and the band above must be sized for that, or its top bulbs cover the hero's last line. */
@media(max-width:600px){#df-community-story .df-story-sign-band{height:calc(min(390px,86vw) * .268 + 21px)}}
/* Only clip sideways (for the scrolling photo wall), never at the top, so the sign's bulb glow is never cut off. */
#df-community-story{overflow:visible;overflow-x:clip}