/* A considered chapter rhythm, with original geometry and purposeful motion. */
:root{--header-h:80px;--chapter-pad:clamp(30px,5svh,64px)}
html{scroll-padding-top:var(--header-h);scroll-snap-type:y proximity}
html.chapter-guided{scroll-snap-type:none}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.site-header,.site-header.hero-header{height:var(--header-h);padding-inline:40px;background:#f7f5efec;color:#222621;border-bottom:1px solid #ddded466;backdrop-filter:blur(20px)}
.site-header:after{content:'';position:absolute;bottom:0;left:0;width:calc(var(--page-progress,0)*100%);height:1px;background:var(--accent);pointer-events:none}
.hero-header .header-cta{background:#242923;border-color:#242923;color:#f8f6ef}.hero-header .studio-label{border-color:#c8cbc3}.hero-header .menu-toggle span{background:#242923}
.chapter{position:relative;isolation:isolate;min-block-size:calc(100svh - var(--header-h));scroll-snap-align:start;scroll-margin-top:0;padding-block:var(--chapter-pad);margin-block:0}
.chapter.wrap{width:100%;padding-inline:max(40px,calc((100vw - 1360px)/2))}
.chapter>.section-heading{margin-bottom:clamp(26px,4svh,42px)}.chapter .section-heading h2{font-size:clamp(38px,4vw,62px)}
.chapter .section-heading>p{font-size:15px;max-width:330px}
.hero.immersive-hero{width:100%;height:calc(100svh - var(--header-h));min-height:620px;max-height:none;background:#f7f5ef;color:#242923;padding:clamp(55px,12svh,125px) max(40px,calc((100vw - 1360px)/2)) 85px;overflow:clip}
.immersive-hero:before,.immersive-hero:after{content:none}
.hero-content{position:relative;z-index:2;max-width:750px;pointer-events:none}
.hero-content a{pointer-events:auto}
.immersive-hero h1{font-size:clamp(57px,6.1vw,98px);font-weight:500;letter-spacing:-.07em;line-height:1.07;margin:0 0 30px}
.immersive-hero .hero-line{display:block;color:#222822}
.immersive-hero .hero-line-accent{color:#bd4d32}
.hero-lead{font-size:clamp(20px,2vw,27px);line-height:1.5;letter-spacing:-.035em;color:#454d41}
.hero-support{font-size:15px;line-height:1.8;color:#687061;margin-top:17px;max-width:410px}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:28px}
.hero-primary{background:#293629;border-color:#293629;color:#fbfbf4;padding:16px 20px;gap:26px;font-size:14px;min-height:52px}
.hero-primary:hover{background:#4b6340;color:white;border-color:#4b6340}
.hero-primary>.icon{width:18px;height:18px}
.hero-work-link{display:flex;align-items:center;gap:17px;padding:12px 0;border-bottom:1px solid #a1a995;font-size:13px;color:#57664b}
.kinetic-stage{position:absolute;right:-2%;top:2%;width:61%;height:90%;z-index:0;pointer-events:none;overflow:clip}
.atmosphere{display:block;width:100%;height:100%}
.kinetic-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f7f5ef,transparent 28%);pointer-events:none}
.kinetic-caption{position:absolute;bottom:0;right:15%;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#77816d;text-align:right;letter-spacing:.01em}
.kinetic-caption>span:last-child{color:#424f38}
.hero-bottom{position:absolute;bottom:25px;left:max(40px,calc((100vw - 1360px)/2));right:max(40px,calc((100vw - 1360px)/2));display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:20px;border-top:1px solid #d6dccc;font-size:10px;color:#707c62}
.scroll-invitation{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.06em}.scroll-track{height:24px;width:14px;border:1px solid #b0baa4;border-radius:8px;position:relative}.scroll-track i{display:block;position:absolute;width:2px;height:5px;background:#7e916a;left:5px;top:5px;animation:chapter-scroll 2s ease-in-out infinite}
.hero-bottom button{display:flex;align-items:center;gap:8px;padding:8px 0;background:none;color:#66765a;font-size:11px;min-height:36px}.hero-bottom button>.icon{width:14px;height:14px}
@keyframes chapter-scroll{0%,100%{transform:translateY(0);opacity:.4}60%{transform:translateY(7px);opacity:1}}
/* This is a single thought, held on its own stage. */
.intro-section.chapter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#242b27;color:#f5f4e9;text-align:center;padding-block:40px}
.intro-section:before{content:none}.intro-section .section-kicker{color:#aab4a2;padding:0;font-size:10px;letter-spacing:.12em}.picture-copy{max-width:960px}
.intro-section h2{font-size:clamp(37px,4.5vw,70px);font-weight:450;letter-spacing:-.055em;line-height:1.22}.intro-section h2>span{color:#d9a78b}
.intro-section .picture-copy>p{margin:26px auto 0;font-size:17px;line-height:1.8;color:#bdc6b5;max-width:640px}
.intro-section #picture-visual{margin:0 auto;height:180px;width:430px}.intro-section .sv-picture-caption text{fill:#c6cdbb}.intro-section .sv-picture-frame{stroke:#637561}.intro-section .sv-picture-connections{stroke:#dc9d78}
.services-section.chapter{display:flex;flex-direction:column;justify-content:center;background:#f6f6f2}
.services-section .service-offer{border-radius:5px;padding:26px;background:#f6f7f0;box-shadow:none}
.services-section .service-offer:nth-child(2){background:#f7f0e7}.services-section .service-offer:nth-child(3){background:#eef3ee}
.services-section .offer-icon{margin-bottom:23px}.services-section .service-offer h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:14px}
.services-section .service-offer>p{font-size:14px;line-height:1.75;min-height:74px}.services-section .service-offer ul{font-size:12px;padding-block:17px 21px;line-height:1.7}
.services-section .service-offer>a{font-size:12px;padding-top:16px}.services-section .integration-note{font-size:12px;margin-top:22px}
.services-controls{display:none}
.chapter.interactive-lab{min-block-size:calc(100svh - var(--header-h));margin-bottom:0;padding-block:var(--chapter-pad)}
.interactive-lab:before{content:none!important}
.interactive-lab>.wrap{width:min(1360px,calc(100% - 80px))}
.interactive-lab .demo-studio{scroll-margin-top:8px}
.interactive-lab .demo-tabs{top:var(--header-h)}
.work-section.chapter{background:#faf9f4;display:flex;flex-direction:column;justify-content:center}
.work-section .project-card:nth-child(2){margin-top:0}
.work-section .project-image{height:clamp(230px,31svh,350px);padding:55px 28px 25px;border-radius:5px;background-image:none!important}
.work-section .browser-mock{transform:none;transition:transform .5s var(--ease);box-shadow:0 12px 32px #1e221e1c}
.work-section .project-card:hover .browser-mock{transform:translateY(-6px)}
.work-section .project-caption{padding-block:21px}.work-section .project-caption h3{font-size:22px}.work-section .project-caption p{font-size:13px}
.work-section .work-bottom{margin-top:14px}
.approach-section.chapter{display:grid;grid-template-columns:1fr 390px;align-content:center;gap:10px 35px;background:#eeefe7}
.approach-section>.section-heading{display:block;margin:0;align-self:center}.approach-section .section-heading>p{margin-top:20px;max-width:510px;font-size:15px}.approach-section #approach-visual{align-self:center;justify-self:end}
.approach-section .process-grid{grid-column:1/-1;margin-top:28px;gap:32px}
.approach-section .process-step p{min-height:0;font-size:14px;line-height:1.75;max-width:255px}
.approach-section .process-step h3{font-size:25px;margin-top:18px;letter-spacing:-.035em}
.approach-section .step-deliverable{margin-top:17px;font-size:11px;line-height:1.6}
.pricing-section.chapter{display:grid;grid-template-columns:1fr 1.25fr;align-content:center;gap:70px;background:#f7f2e9}
.pricing-section .pricing-intro h2{font-size:clamp(39px,4vw,62px);line-height:1.12}
.pricing-section .pricing-intro>p{max-width:360px;font-size:15px;line-height:1.75}
.pricing-section #pricing-visual{margin-top:28px}
.pricing-section .price-option{padding-bottom:22px;margin-bottom:22px}
.pricing-section .price-title{align-items:center;gap:15px}
.pricing-section .price-title h3{font-size:21px;letter-spacing:-.035em}
.pricing-section .price{font-size:31px}
.pricing-section .price-words{font-size:18px}
.pricing-section .price-option>p{font-size:14px;line-height:1.7;margin-top:13px}
.pricing-section .price-option>p{margin-bottom:0}
.pricing-cta{font-size:13px;margin:0 0 23px;background:none;color:#363e30}
.pricing-section .price-option .text-link{font-size:12px;gap:22px;margin-top:14px;padding-bottom:6px}
.pricing-section .care-price{padding:17px;background:#ede7dc}.pricing-section .care-price p{font-size:12px}.pricing-section .price-note{font-size:10px;line-height:1.7}
.faq-section.chapter{display:grid;grid-template-columns:1fr 1.65fr;align-content:center;gap:65px;background:#faf9f4}
.faq-section #faq-visual{margin-top:35px}
.faq-section .faq-list summary{padding:19px 0;font-size:15px}.faq-section .faq-list details>p{font-size:14px;line-height:1.8}
.contact-section.chapter{display:grid;grid-template-columns:1.5fr 1fr;align-content:center;gap:70px;background:#f0eee4}
.contact-section h2{font-size:clamp(54px,7vw,100px);margin-block:25px 27px}
.contact-section .contact-main>p{font-size:16px;line-height:1.75}
.contact-section .contact-aside{width:auto;max-width:350px}
.contact-section #contact-visual{margin:0 0 30px}
.contact-section .contact-aside>.tiny-label{margin-bottom:20px}
.site-footer{background:#f6f6f2}
.effects-paused .scroll-track i{animation:none}.effects-paused .reveal-ready{opacity:1;transform:none;transition:none}
@media(min-width:1101px){
.chapter.interactive-lab{display:flex;align-items:center;padding-block:30px}
.interactive-lab>.wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 40px;align-items:center}
.interactive-lab .section-heading{display:block;align-self:end;margin:0}
.interactive-lab .section-heading h2{font-size:40px;line-height:1.13;margin-top:20px}
.interactive-lab .section-heading>p{font-size:14px;line-height:1.8;margin-top:24px}
.interactive-lab .demo-studio{grid-column:2;grid-row:1/3}
.interactive-lab .simple-demo-cta{grid-column:1;align-self:start;display:block;margin-top:30px;font-size:15px;line-height:1.7}
.interactive-lab .simple-demo-cta>button{margin-top:18px;font-size:12px}
.interactive-lab .demo-tabs{padding:6px;gap:6px}
.interactive-lab .demo-tabs>button{min-height:48px;padding:10px;font-size:12px}
.interactive-lab .demo-panel{padding:22px}
.interactive-lab .demo-heading{margin-bottom:19px;gap:25px}
.interactive-lab .demo-heading h3{font-size:27px;line-height:1.15}
.interactive-lab .demo-heading>p{font-size:12px;max-width:240px}
.interactive-lab .demo-kicker{font-size:8px;margin-bottom:7px}
.interactive-lab .desktop-break{display:none}
.interactive-lab .demo-benefit{margin-top:15px;font-size:11px}
.interactive-lab .demo-disclosure{padding:11px 22px;font-size:9px}
.interactive-lab .ai-message-body p{font-size:16px}
.interactive-lab .calendar-workspace{--hour:40px}
.interactive-lab .calendar-canvas{height:322px}
.interactive-lab .calendar-toolbar{height:50px}
.interactive-lab .calendar-controls{padding:12px 20px}
.interactive-lab .calendar-detail{top:6px}
.interactive-lab .website-frame{height:400px}
.interactive-lab .cafe-copy{padding:24px 28px}
.interactive-lab .cafe-copy h4{font-size:58px}
}
@media(min-width:1500px){.kinetic-stage{right:2%;width:56%}.hero-content{max-width:820px}}
@media(max-width:1100px){.site-header{padding-inline:28px}.chapter.wrap{padding-inline:28px}.interactive-lab>.wrap{width:calc(100% - 56px)}.hero.immersive-hero{padding-inline:28px}.hero-bottom{left:28px;right:28px}.kinetic-stage{width:63%;right:-8%;opacity:.9}.hero-content{max-width:660px}.hero-support{max-width:370px}.services-section .service-offer{padding:22px}.services-section .service-offer>p{min-height:98px}.services-section .service-offer h3{font-size:23px}.approach-section.chapter{grid-template-columns:1fr 310px;gap:18px}.approach-section #approach-visual{width:310px;height:175px}.pricing-section.chapter{gap:40px}.pricing-section .price-title h3{font-size:19px}.faq-section.chapter{gap:40px}.contact-section.chapter{gap:45px}}
@media(min-width:761px) and (max-width:900px){.hero.immersive-hero{min-height:680px;padding-top:80px}.hero-content{max-width:610px}.immersive-hero h1{font-size:65px}.kinetic-stage{width:75%;right:-22%;top:10%;opacity:.55}.kinetic-caption{display:none}.services-section .service-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.services-section .service-offer{display:flex;padding:18px;gap:0}.services-section .service-offer h3{font-size:21px}.services-section .service-offer>p{font-size:13px;min-height:135px}.services-section .service-offer ul{font-size:11px;padding:16px 0;line-height:1.7}.services-section .service-offer>a{font-size:11px}.services-section .offer-number{right:18px}.approach-section .process-grid{gap:20px}.approach-section .process-step h3{font-size:23px}.approach-section .process-step p{font-size:13px}.pricing-section .price-title{display:block}.pricing-section .price{margin-top:10px}.contact-section .contact-aside>a{font-size:21px}}
@media(max-width:760px){
:root{--header-h:64px;--chapter-pad:30px}
html{scroll-snap-type:y proximity}
.site-header,.site-header.hero-header{padding-inline:21px;height:64px}
.brand>span:nth-child(2){font-size:27px}.brand-mark{width:22px;height:23px}.mobile-menu{top:64px}
.chapter.wrap{padding-inline:24px}
.hero.immersive-hero{min-height:620px;height:calc(100svh - 64px);padding:38px 24px 72px;display:flex;align-items:flex-start}
.hero-content{max-width:100%}
.immersive-hero h1{font-size:clamp(37px,10vw,57px);line-height:1.09;letter-spacing:-.067em;margin-bottom:20px}
.hero-lead{font-size:21px;line-height:1.45}
.hero-support{font-size:13px;line-height:1.8;max-width:320px;margin-top:13px}
.hero-support br{display:none}
.hero-actions{margin-top:22px;gap:19px;flex-wrap:wrap}
.hero-primary{font-size:12px;min-height:47px;padding:13px 15px;gap:18px}
.hero-work-link{font-size:11px;gap:12px;padding-block:10px}
.kinetic-stage{width:100%;height:38%;right:-7%;top:auto;bottom:48px;opacity:1}
.kinetic-stage:after{background:linear-gradient(0deg,#f7f5ef,transparent 12%);pointer-events:none}
.kinetic-caption{display:none}
.hero-bottom{left:24px;right:24px;bottom:15px;padding-top:12px;gap:15px}
.hero-bottom>span:first-child{display:none}.hero-bottom button{font-size:10px}
.scroll-invitation{font-size:8px;gap:8px}
.intro-section.chapter{padding:40px 24px;gap:27px}
.intro-section h2{font-size:clamp(31px,8.8vw,43px);line-height:1.27;letter-spacing:-.05em}
.intro-section .picture-copy>p{font-size:15px;line-height:1.8;margin-top:23px}
.intro-section .picture-copy>p br{display:none}
.intro-section #picture-visual{width:310px;height:140px}
.chapter>.section-heading{display:block;margin-bottom:24px}
.chapter .section-heading h2{font-size:37px;line-height:1.15;margin-top:14px}
.chapter .section-heading>p{font-size:14px;line-height:1.7;margin-top:17px;max-width:330px}
.services-section.chapter{padding-block:30px}
.services-section .section-heading{margin-bottom:20px}
.services-section .section-heading>p{display:none}
.services-section .service-offers{display:grid;grid-auto-flow:column;grid-auto-columns:100%;grid-template-columns:none;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.services-section .service-offers::-webkit-scrollbar{display:none}
.services-section .service-offer{scroll-snap-align:start;padding:24px;display:flex;border-radius:5px}
.services-section .service-offer h3{font-size:28px}
.services-section .service-offer>p{font-size:14px;min-height:0;line-height:1.7}
.services-section .offer-icon{margin-bottom:17px}
.services-section .service-offer ul{font-size:12px;padding-block:14px 18px}
.services-section .service-offer li{margin-block:5px}
.services-section .service-offer>a{font-size:12px}
.services-section .offer-number{right:24px;top:33px}
.services-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;font-size:11px;color:#6a765d}
.services-controls>div{display:flex;gap:8px}
.services-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;border:1px solid #c6d1bc;background:#f4f7ed;border-radius:5px;color:#526b3f;font-size:11px;padding:10px}
.services-controls button .icon{width:17px;height:17px}
#service-prev .icon{transform:rotate(180deg)}
.services-controls button:disabled{opacity:.35;cursor:default}
.services-section .integration-note{font-size:11px;margin-top:17px;line-height:1.7}
.interactive-lab>.wrap{width:calc(100% - 36px)}
.chapter.interactive-lab{padding-block:30px}
.interactive-lab .section-heading h2{font-size:37px}
.interactive-lab .section-heading>p{font-size:14px;margin-top:13px}
.interactive-lab .section-heading{margin-bottom:21px}
.interactive-lab .demo-tabs{top:64px}
.work-section .project-grid{display:grid;grid-template-columns:1fr;gap:34px}
.work-section .project-image{height:auto;aspect-ratio:1.38;padding:49px 23px 21px}
.work-section .project-caption{padding:17px 0 0}
.work-section .project-caption h3{font-size:23px}.work-section .project-caption p{font-size:13px}
.work-section .project-card{scroll-snap-align:start;scroll-margin-top:85px}
.work-section .work-bottom{margin-top:28px;font-size:11px}
.approach-section.chapter{display:flex;flex-direction:column;justify-content:center;gap:0}
.approach-section>.section-heading{margin-bottom:15px}
.approach-section .section-heading>p{font-size:14px;margin-top:16px;max-width:340px}
.approach-section #approach-visual{width:280px;height:100px;align-self:center;margin-bottom:8px}
.approach-section .process-grid{grid-template-columns:1fr 1fr;gap:23px 20px;margin-top:15px}
.approach-section .process-step h3{font-size:22px;margin-top:13px;line-height:1.3}
.approach-section .process-step p{font-size:13px;line-height:1.7;min-height:0}
.approach-section .step-deliverable{display:none}
.pricing-section.chapter{display:block;padding-block:26px}
.pricing-section .pricing-intro{position:relative;margin-bottom:20px}
.pricing-section .pricing-intro h2{font-size:37px;margin-block:15px 17px}
.pricing-section .pricing-intro>p{font-size:14px;line-height:1.7}
.pricing-section #pricing-visual{position:absolute;right:0;top:-12px;width:105px;height:55px;margin:0}
.pricing-section .pricing-cta{font-size:12px;margin:0 0 16px}
.pricing-section .price-option{padding-bottom:14px;margin-bottom:17px}
.pricing-section .price-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pricing-section .price-title h3{font-size:18px;max-width:170px}
.pricing-section .price{font-size:25px;white-space:nowrap;margin:0}
.pricing-section .price small{font-size:10px}
.pricing-section .price-words{font-size:15px}
.pricing-section .price-option>p{font-size:13px;margin-top:10px;line-height:1.7}
.pricing-section .price-option .text-link{font-size:12px;margin-top:11px}
.pricing-section .care-price{padding:14px}
.pricing-section .care-price strong{font-size:13px}.pricing-section .care-price p{font-size:11px}
.pricing-section .price-note{font-size:10px;line-height:1.7;margin-top:15px}
.faq-section.chapter{display:block}
.faq-section>div:first-child{position:relative;min-height:90px}
.faq-section h2{font-size:36px;margin-top:16px;margin-bottom:22px}
.faq-section #faq-visual{position:absolute;width:125px;height:70px;right:0;top:0;margin:0;opacity:.7}
.faq-section .faq-list summary{font-size:14px;padding:17px 0}
.faq-section .faq-list details>p{font-size:14px;line-height:1.8}
.contact-section.chapter{display:flex;flex-direction:column;justify-content:center;gap:30px}
.contact-section h2{font-size:58px;margin:21px 0}
.contact-section .contact-main>p{font-size:14px}
.contact-section .contact-main .button{margin-top:23px}
.contact-section .contact-aside{margin:0;position:relative;width:100%;max-width:370px}
.contact-section #contact-visual{position:absolute;right:0;top:-95px;width:130px;height:75px;opacity:.8;margin:0;pointer-events:none}
.contact-section .contact-aside>.tiny-label{font-size:10px;margin:0 0 16px}
.contact-section .contact-aside>a{font-size:21px}
.contact-section .contact-aside>span:last-child{font-size:12px;margin-top:15px}
}
@media(max-width:380px){
.chapter.wrap{padding-inline:20px}
.site-header,.site-header.hero-header{padding-inline:19px}
.hero.immersive-hero{padding:26px 20px 63px;min-height:605px}
.immersive-hero h1{font-size:36px}
.hero-lead{font-size:20px}
.hero-support{font-size:12px;max-width:280px}
.hero-actions{gap:14px;margin-top:19px}
.hero-primary{font-size:11px;padding:12px 13px;gap:13px}
.hero-work-link{font-size:10px;gap:8px}
.hero-bottom{left:20px;right:20px}
.kinetic-stage{height:32%;bottom:44px}
.kinetic-caption{font-size:8px;right:13%}
.intro-section h2{font-size:30px}.intro-section .picture-copy>p{font-size:14px}
.intro-section #picture-visual{height:120px;width:280px}
.services-section .service-offer{padding:20px}
.services-section .service-offer h3{font-size:26px}
.services-section .service-offer>p{font-size:13px}
.services-section .service-offer ul{font-size:11px}
.chapter .section-heading h2{font-size:34px}
.pricing-section .price-title h3{font-size:17px;max-width:145px}.pricing-section .price{font-size:23px}.pricing-section .price-words{font-size:14px}
.pricing-section #pricing-visual{width:90px}
.approach-section .process-step h3{font-size:20px}.approach-section .process-step p{font-size:12px}
.faq-section #faq-visual{width:90px;opacity:.6}
.contact-section h2{font-size:53px}
}
@media(max-height:720px) and (max-width:760px){.hero.immersive-hero{min-height:500px}.kinetic-stage{height:clamp(120px,23svh,160px);bottom:45px}}
@media(max-height:650px) and (min-width:761px){.hero.immersive-hero{min-height:570px;padding-top:50px}.immersive-hero h1{font-size:64px}.hero-lead{font-size:21px}.hero-support{font-size:14px}.hero-actions{margin-top:22px}.hero-bottom{bottom:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none;scroll-behavior:auto}.scroll-track i{animation:none}.work-section .browser-mock{transform:none!important}.reveal-ready{opacity:1;transform:none;transition:none}}
/* Give the explanatory artwork enough optical weight on larger screens. */
.intro-section #picture-visual{width:min(780px,100%);height:325px}
.approach-section.chapter{grid-template-columns:1fr 1.45fr;gap:20px 45px}
.approach-section #approach-visual{width:100%;max-width:720px;height:245px}
@media(max-width:1100px) and (min-width:761px){.approach-section.chapter{grid-template-columns:1fr 1.35fr;gap:20px}.approach-section #approach-visual{height:220px}}
@media(max-width:760px){
  .intro-section #picture-visual{width:100%;height:180px}
  .intro-section.chapter{gap:24px}
  .approach-section.chapter{gap:0}
  .approach-section #approach-visual{width:100%;height:240px;margin:6px 0 15px}
}
@media(max-width:380px){.intro-section #picture-visual{height:155px}.approach-section #approach-visual{height:215px}}