
.how-work-page{background:var(--flex-paper);color:var(--flex-ink)}.how-work-page h1 em,.how-work-page h2 em{color:var(--flex-link)}.how-work-page .button{background:var(--flex-leaf);border-color:var(--flex-leaf);color:var(--flex-ink)}.how-work-page .button:hover{background:#9bdead}
.how-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:9%;align-items:center;padding:65px 0 110px}.how-work-page .how-hero p.eyebrow{text-align:left!important;color:var(--flex-green)!important;margin:0 0 25px}.how-hero h1{font-size:clamp(60px,6.5vw,96px)}.how-hero p:not(.eyebrow){font-size:18px;line-height:1.75;margin:24px 0;max-width:590px}.how-hero p.how-lead{font-size:24px;line-height:1.45}.how-hero .button{margin-top:5px}
.how-connection{position:relative;margin:25px 8px 35px 0;transform:rotate(2deg)}.how-connection>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:80px 28px 28px 28px}.how-note{position:absolute;top:-25px;left:-20px;z-index:1;background:var(--flex-sky);padding:13px 21px;border-radius:23px;transform:rotate(-6deg);font:italic 21px/1.2 Georgia,serif}.how-person{position:absolute;bottom:-30px;left:-24px;background:var(--flex-ink);color:var(--flex-paper);padding:23px 28px;border-radius:24px;transform:rotate(-4deg);box-shadow:8px 8px 0 var(--flex-sky)}.how-person strong{font-size:26px;display:block;line-height:1.2;margin-bottom:10px}.how-person span{font-size:14px;line-height:1.5}.how-team{position:absolute;right:-24px;bottom:-52px;display:grid;place-content:center;width:128px;height:128px;border-radius:50%;background:var(--flex-leaf);color:var(--flex-ink);text-align:center;font:italic 21px/1.15 Georgia,serif;transform:rotate(8deg)}
.how-route{padding:80px 0 100px;background:var(--flex-light)}.how-heading{text-align:center;max-width:900px;margin:0 auto 60px}.how-heading .eyebrow{margin:0 auto 24px}.how-heading h2{font-size:clamp(44px,5vw,72px)}.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.how-step{min-width:0}.how-step-art{position:relative;aspect-ratio:1.15;background:var(--flex-paper);border-radius:30px;margin-bottom:30px;padding:15px 18px 40px}.how-step-1 .how-step-art{background:#d8f0df}.how-step-2 .how-step-art{background:#dcd4f9}.how-step-art svg{display:block;width:100%;height:100%;color:var(--flex-ink)}.how-step-art>span{position:absolute;bottom:17px;left:20px;right:20px;text-align:center;font:italic 24px/1.2 Georgia,serif}.how-step-copy h3{font-size:30px;line-height:1.15;letter-spacing:-.03em;margin:0 0 18px}.how-step-copy p{font-size:16px;line-height:1.75}.how-step-copy ul{list-style:none;padding:0;margin:25px 0 0}.how-step-copy li{position:relative;font-size:14px;line-height:1.5;padding:7px 0 7px 23px}.how-step-copy li:before{content:'↗';position:absolute;left:0;color:var(--flex-green)}
.how-support{background:var(--flex-ink);color:var(--flex-paper);padding:90px 0 120px}.how-support-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:12%;align-items:start}.coastal-sample .how-support p.eyebrow{color:var(--flex-leaf)!important;text-align:left!important;margin:0 0 25px}.how-support h2{font-size:clamp(48px,5vw,72px)}.how-work-page .how-support h2 em{color:var(--flex-sky)}.how-support-grid>div>p:not(.eyebrow){font-size:20px;line-height:1.6;margin:27px 0}.how-support .text-link{color:var(--flex-leaf)}.how-promises{display:grid;gap:32px}.how-promises h3{font-size:28px;line-height:1.15;color:var(--flex-leaf);margin:0 0 13px;font-weight:500}.how-promises p{font-size:17px;line-height:1.75;color:#f1f4f6}
.how-cta{position:relative;text-align:center;padding:65px 0 85px;background:var(--flex-light)}.how-cta>svg{position:absolute;top:-49px;left:0;width:100%;height:50px;color:var(--flex-light)}.how-cta p.eyebrow{margin:0 auto 25px}.how-cta h2{font-size:clamp(43px,5vw,70px)}.how-cta .button{margin-top:35px}
@media(max-width:1050px){.how-hero{gap:7%}.how-steps{gap:25px}.how-step-copy h3{font-size:26px}.how-team{width:110px;height:110px;font-size:18px;right:-12px}.how-person{left:-12px;padding:20px}.how-person strong{font-size:23px}.how-support-grid{gap:7%}}
@media(max-width:760px){.how-hero{grid-template-columns:1fr;padding:35px 0 85px;gap:45px}.how-hero h1{font-size:clamp(52px,12vw,78px)}.how-hero p.how-lead{font-size:22px}.how-connection{max-width:430px;width:94%;justify-self:center;margin:15px 0 35px}.how-note{font-size:19px;left:-8px}.how-person{bottom:-20px}.how-team{bottom:-48px}.how-route{padding:55px 0 65px}.how-heading{margin-bottom:35px}.how-steps{grid-template-columns:1fr;gap:45px;max-width:520px;margin:auto}.how-step-art{aspect-ratio:1.35;margin-bottom:23px}.how-step-copy h3{font-size:31px}.how-support{padding:60px 0 95px}.how-support-grid{grid-template-columns:1fr;gap:42px}.how-support-grid>div>p:not(.eyebrow){font-size:18px}.how-promises{gap:28px}.how-cta{padding:45px 0 65px}}

/* Introduce the process first, with Jennifer's personal section in the middle. */
.how-work-page .how-hero{display:block;text-align:center;padding:65px 0 70px;max-width:1050px}.coastal-sample.how-work-page .how-hero p.eyebrow{text-align:center!important;margin-left:auto;margin-right:auto}.how-work-page .how-hero p:not(.eyebrow){margin-left:auto;margin-right:auto;max-width:750px}.how-personal{display:grid;grid-template-columns:.85fr 1.15fr;gap:12%;align-items:center;padding:95px 0 110px}.how-personal .how-connection{width:100%;max-width:450px;justify-self:center}.how-personal-copy h2{font-size:clamp(44px,4.8vw,68px)}.coastal-sample .how-personal-copy p.eyebrow{color:var(--flex-green)!important;text-align:left!important;margin:0 0 25px}.how-personal-copy>p:not(.eyebrow){font-size:18px;line-height:1.75;margin:25px 0}.how-personal-copy .text-link{color:var(--flex-green)}
@media(max-width:760px){.how-work-page .how-hero{padding:35px 0 45px}.how-personal{grid-template-columns:1fr;gap:55px;padding:70px 0}.how-personal .how-connection{width:94%;margin-bottom:35px}.how-personal-copy>p:not(.eyebrow){font-size:17px}}

/* Fine-line adult scenes on one connected journey. */
.how-journey{position:relative}.how-motion-control{display:flex;justify-content:flex-end;margin:-20px 0 25px}.how-motion-toggle{background:white;color:var(--flex-ink);border:1px solid #b7d5e5;border-radius:25px;padding:10px 16px;font:12px/1.4 Arial,sans-serif;display:flex;gap:15px;align-items:center}.how-motion-toggle:focus-visible{outline:3px solid var(--flex-green);outline-offset:4px}.how-steps{position:relative;isolation:isolate;column-gap:50px}.how-connecting-path{position:absolute;left:-4%;top:70px;width:108%;height:165px;z-index:-1;overflow:visible;fill:none;stroke-linecap:round}.route-base{stroke:#b3e4fc;stroke-width:5}.route-progress{stroke:var(--flex-sky);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:how-path-draw 12s ease-in-out infinite}
.how-work-page .how-step-art{background:transparent;border-radius:0;padding:12px 0 42px;aspect-ratio:1.15;overflow:visible}.how-work-page .how-step-art>span:not(.how-step-badge){bottom:5px;font-size:24px}.how-work-page .how-step-art>.how-step-badge{position:absolute;top:-10px;left:14px;right:auto;bottom:auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:white;color:var(--flex-navy);border:2px solid var(--flex-sky);font:500 26px/1 Arial,sans-serif;box-shadow:0 5px 16px rgb(var(--flex-navy-rgb) / 0.0627);animation:how-step-active 12s ease-in-out infinite}.how-step-1{--scene-delay:4s}.how-step-2{--scene-delay:8s}.how-step-0{--scene-delay:0s}.how-work-page .how-step-art>.how-step-badge{animation-delay:var(--scene-delay)}.scene-detail{transform-box:fill-box;transform-origin:center;animation:how-detail-appear 12s ease-in-out infinite;animation-delay:var(--scene-delay)}.scene-chart{stroke-dasharray:260;stroke-dashoffset:0;animation:how-chart-draw 12s ease-in-out infinite;animation-delay:var(--scene-delay)}.scene-wash{opacity:.95}.how-journey:not(.is-in-view) *,.how-journey.is-paused *{animation-play-state:paused!important}
@keyframes how-path-draw{0%,5%{stroke-dashoffset:1}76%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes how-step-active{0%,30%{background:var(--flex-leaf);border-color:var(--flex-green);transform:scale(1.07)}36%,95%{background:var(--flex-paper);border-color:var(--flex-sky);transform:scale(1)}100%{background:var(--flex-leaf);border-color:var(--flex-green);transform:scale(1.07)}}
@keyframes how-detail-appear{0%,3%{opacity:.4;transform:translateY(4px)}12%,86%{opacity:1;transform:translateY(0)}100%{opacity:.4;transform:translateY(4px)}}
@keyframes how-chart-draw{0%,3%{stroke-dashoffset:260}24%,95%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@media(max-width:760px){.how-motion-control{margin:0 0 25px}.how-steps{gap:50px;padding-left:27px}.how-work-page .how-step-art{aspect-ratio:1.3;padding-top:5px}.how-work-page .how-step-art>.how-step-badge{left:-40px;top:30px;width:43px;height:43px;font-size:23px}.how-connecting-path{display:none}.how-steps:before{content:'';position:absolute;left:6px;top:65px;bottom:35px;width:3px;background:linear-gradient(var(--flex-sky),var(--flex-leaf),var(--flex-sky));border-radius:50%;z-index:-1}.how-work-page .how-step-art>span:not(.how-step-badge){font-size:25px}.how-step-copy{padding-left:5px}}
@media(prefers-reduced-motion:reduce){.how-journey *{animation:none!important}.route-progress{stroke-dashoffset:0}.how-motion-control{display:none}}

/* Approved editorial character scenes replace the initial line figures. */
.how-work-page .how-step-art>.process-editorial-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform-origin:50% 80%;animation:how-editorial-focus 12s ease-in-out infinite;animation-delay:var(--scene-delay)}
@keyframes how-editorial-focus{0%,28%{transform:translateY(-3px) scale(1.025);opacity:1}36%,94%{transform:translateY(0) scale(1);opacity:.88}100%{transform:translateY(-3px) scale(1.025);opacity:1}}
@media(prefers-reduced-motion:reduce){.how-work-page .how-step-art>.process-editorial-art{animation:none;opacity:1;transform:none}}

/* A shared clock drives discrete stop-motion frames and the route. */
.how-journey .route-progress{animation:none;stroke-dashoffset:calc(1 - var(--journey-progress,0))}
.how-work-page .how-step-art>.how-step-badge{animation:none;transform:none;transition:background .25s,border-color .25s,transform .25s}
.how-work-page .is-current-step .how-step-art>.how-step-badge{background:var(--flex-leaf);border-color:var(--flex-green);transform:scale(1.07)}
.character-scene{position:relative;width:100%;height:100%}.character-scene>.process-editorial-art{display:block;width:100%;height:100%;object-fit:contain;animation:none!important;opacity:1;transform:none}
.character-scene>.stop-motion-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.character-scene.has-stop-frames>[data-stop-frame]{opacity:0;transition:none;transform:none;animation:none!important}
.character-scene.has-stop-frames>[data-stop-frame].is-shown{opacity:1}
.route-cursor{fill:var(--flex-green);stroke:var(--flex-paper);stroke-width:3;filter:drop-shadow(0 2px 3px rgb(var(--flex-navy-rgb) / 0.1882))}
@media(prefers-reduced-motion:reduce){.how-work-page .how-step-art>.how-step-badge{transition:none}.how-journey .route-progress{stroke-dashoffset:0}.route-cursor{display:none}.character-scene.has-stop-frames>[data-stop-frame="0"]{opacity:1}.character-scene.has-stop-frames>.stop-motion-pose{opacity:0}}

/* The full team sits over a softly glowing, multicolor backdrop. */
.how-personal{grid-template-columns:1fr 1fr;gap:8%}
.how-personal .how-team-illustration{max-width:570px;transform:none;isolation:isolate;margin:35px 0 0;padding-bottom:20px;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:15px;align-items:end}
.how-team-illustration>img{position:relative;z-index:1;grid-column:1/-1;display:block;width:100%;height:auto;aspect-ratio:11/10;object-fit:contain;border-radius:0;filter:drop-shadow(0 12px 15px rgb(var(--flex-navy-rgb) / 0.0824))}
.how-team-illustration .how-note{top:-28px;left:2%;z-index:2}
.how-team-illustration .how-person{position:relative;bottom:auto;left:auto;grid-column:1;padding:20px 23px;z-index:2;margin-top:-10px;transform:rotate(-3deg)}
.how-team-illustration .how-team{position:relative;right:auto;bottom:auto;grid-column:2;width:128px;height:128px;z-index:2;margin-top:-10px}
.team-bokeh{position:absolute;inset:-35px -20px 135px;z-index:0;pointer-events:none}
.team-bokeh i{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;filter:blur(25px);background:radial-gradient(circle,rgb(var(--flex-sky-rgb) / 0.6667) 0%,rgb(var(--flex-sky-rgb) / 0.2667) 42%,transparent 72%);opacity:.7;animation:team-glow 9s ease-in-out infinite alternate}
.team-bokeh i:nth-child(1){left:-8%;top:8%}
.team-bokeh i:nth-child(2){right:-8%;top:20%;background:radial-gradient(circle,#b38affb3,transparent 72%);animation-delay:-3s}
.team-bokeh i:nth-child(3){left:28%;top:-8%;background:radial-gradient(circle,rgb(var(--flex-leaf-rgb) / 0.6784),transparent 72%);animation-delay:-6s}
.team-bokeh i:nth-child(4){left:0;bottom:0;width:34%;background:radial-gradient(circle,#ffc34d99,transparent 72%);animation-delay:-2s}
.team-bokeh i:nth-child(5){right:0;bottom:8%;width:36%;background:radial-gradient(circle,#fa8ac19e,transparent 72%);animation-delay:-5s}
.team-bokeh i:nth-child(6){left:35%;bottom:-3%;width:30%;background:radial-gradient(circle,#ff9b5d88,transparent 72%);animation-delay:-7s}
@keyframes team-glow{0%,15%{opacity:.3;transform:scale(.88)}65%,100%{opacity:.95;transform:scale(1.12)}}
@media(max-width:1050px) and (min-width:761px){.how-team-illustration .how-person{padding:18px 16px}.how-team-illustration .how-person strong{font-size:21px}.how-team-illustration .how-team{width:108px;height:108px;font-size:18px}.how-personal .how-team-illustration{grid-template-columns:minmax(0,1fr) 108px;gap:10px}}
@media(max-width:760px){.how-personal{grid-template-columns:1fr;gap:35px}.how-personal .how-team-illustration{width:100%;max-width:540px;padding-bottom:20px;margin-bottom:20px}.team-bokeh{inset:-25px -10px 90px}.how-team-illustration .how-person strong{font-size:23px}.how-team-illustration .how-person{padding:18px}.how-team-illustration .how-note{font-size:18px}}
@media(max-width:380px){.how-personal .how-team-illustration{grid-template-columns:minmax(0,1fr) 100px;gap:10px}.how-team-illustration .how-team{width:100px;height:100px;font-size:17px}.how-team-illustration .how-person strong{font-size:20px}.how-team-illustration .how-person span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.team-bokeh i{animation:none;opacity:.65;transform:none}}

/* Full-width background film follows the Services and Dental hero treatment. */
.how-work-page .how-hero.how-video-hero{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;max-width:none;min-height:clamp(560px,calc(100svh - 145px),780px);padding:90px 0;margin:0;overflow:hidden;background:var(--flex-navy);text-align:left}
.how-video-hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#051722d9 0%,#0517229c 48%,#05172238 100%);pointer-events:none}
.how-video-hero .how-hero-copy{position:relative;z-index:2;width:min(1320px,86%);margin:0 auto}
.coastal-sample.how-work-page .how-video-hero p.eyebrow{color:var(--flex-paper)!important;text-align:left!important;font-size:25px!important;margin:0 0 27px}
.how-work-page .how-video-hero h1{color:var(--flex-paper);max-width:1000px;font-size:clamp(64px,7vw,106px);line-height:1.03;text-shadow:0 2px 22px #0003}
.how-work-page .how-video-hero h1 em{color:#6dcbff}
.how-work-page .how-video-hero p.how-lead{color:var(--flex-paper);max-width:650px;margin:27px 0;font-size:24px;line-height:1.45;text-shadow:0 2px 16px #0005}
.how-video-hero .button{background:var(--flex-leaf);color:var(--flex-ink)}
.how-video-frame{position:absolute;inset:0}
.how-video-frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.how-video-toggle{position:absolute;right:25px;bottom:22px;z-index:3;border:1px solid rgb(var(--flex-paper-rgb) / 0.502);border-radius:30px;padding:11px 17px;background:rgb(var(--flex-navy-rgb) / 0.902);color:var(--flex-paper);font:500 12px/1.3 Arial,sans-serif;display:flex;gap:12px;align-items:center;cursor:pointer}
.how-video-toggle:hover{background:var(--flex-navy)}.how-video-toggle:focus-visible{outline:3px solid var(--flex-leaf);outline-offset:3px}
@media(max-width:760px){.how-work-page .how-hero.how-video-hero{min-height:570px;padding:65px 0 100px}.how-work-page .how-video-hero h1{font-size:clamp(52px,11.5vw,82px);line-height:1.05}.coastal-sample.how-work-page .how-video-hero p.eyebrow{font-size:23px!important}.how-work-page .how-video-hero p.how-lead{font-size:21px}.how-video-toggle{right:18px;bottom:18px;font-size:11px}.how-video-frame video{object-position:58% center}.how-video-hero:before{background:linear-gradient(90deg,#051722d6,#05172270)}}

/* Leaf-green support section separates the promises from the black footer. */
.how-work-page .how-support{background:#d8f0df;color:var(--flex-ink);padding-bottom:150px}
.coastal-sample.how-work-page .how-support p.eyebrow{color:var(--flex-green)!important}
.how-work-page .how-support h2{color:var(--flex-ink)}
.how-work-page .how-support h2 em{color:var(--flex-link)}
.how-work-page .how-promises h3{color:var(--flex-green)}
.how-work-page .how-promises p{color:var(--flex-ink)}
.how-work-page .how-support .text-link{color:var(--flex-green)}
.how-work-page .how-support+section.site-closing.page-cta{margin-top:0}
@media(max-width:760px){.how-work-page .how-support{padding-bottom:125px}}
