/* English homepage only. Content remains in the existing CMS document tree. */
body{background:#faf8ef;color:#171821;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237c6f50' opacity='.045' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
header,main,footer{max-width:1440px;margin-inline:auto}header{border-bottom:1px solid #8a8b83;background:transparent;padding:22px 5.5%}.brand img,footer img{width:218px;height:auto}header nav{font-size:14px}a:focus-visible,button:focus-visible{outline:3px solid #6422b7;outline-offset:5px}.hero{position:relative;min-height:550px;padding:54px 5.5% 38px;padding-right:54%;isolation:isolate}.hero:after{content:'';position:absolute;z-index:-1;right:2.5%;top:10px;width:51%;height:520px;background:url('/assets/paperlike-hero.webp') center/contain no-repeat}.hero h1{font-size:clamp(40px,4.7vw,65px);line-height:1.04;letter-spacing:-2.5px}.hero h1 em{color:#7723cb;font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}.hero .eyebrow{font-size:12px;letter-spacing:.5px;white-space:nowrap}.hero-bottom{display:block}.hero .lead{font-size:18px;line-height:1.5;max-width:445px;margin:26px 0}.cta{position:relative;background:#ec0085;color:#fff;border:0;border-radius:2px;padding:16px 25px;box-shadow:1px 3px 3px #28201c25;clip-path:polygon(1% 5%,7% 2%,14% 4%,24% 1%,38% 3%,48% 0,60% 3%,71% 1%,82% 3%,97% 0,100% 8%,98% 40%,100% 63%,96% 86%,90% 96%,78% 94%,66% 98%,53% 96%,38% 100%,26% 96%,14% 98%,1% 94%,2% 65%,0 39%);transform:rotate(-1deg);font-weight:600}header>.cta{background:#fffdf4;color:#181923;border:1px solid #dedbd1;padding:12px 20px;font-size:14px}.principles{margin:0 5.5%;padding:24px 0 30px;border-top:0;border-bottom:1px solid #8a8b83;gap:25px}.principles span{display:flex;align-items:center;flex:1;font-size:15px}.principles span:before{content:'';display:inline-block;flex:0 0 55px;height:55px;background:url('/assets/paperlike-understand.webp') center/contain no-repeat;margin-right:15px}.principles span:nth-child(2):before{background-image:url('/assets/paperlike-maintenance.webp')}.principles span:nth-child(3):before{background-image:url('/assets/paperlike-care.webp')}.section{padding:40px 5.5%}.section-head{display:block}.section-head h2 br,.approach>h2 br,.closing h2 br{display:none}h2{font-size:clamp(28px,3.2vw,43px);line-height:1.1;letter-spacing:-1.6px}.section-head p:last-child{max-width:none;color:#292a34;margin-bottom:0}.eyebrow{color:#292a34;font-size:12px;letter-spacing:.5px}.cards{gap:22px 18px;margin-top:25px}.card{position:relative;min-height:190px;padding:24px 18px 24px 47%;border:1px solid #5a5c58;border-radius:1px 3px 2px 1px;background:transparent;box-shadow:none;transform:none}.card:before{content:'';position:absolute;left:4%;top:17%;width:39%;height:70%;background:var(--drawing) center/contain no-repeat}.card:nth-child(1){--drawing:url('/assets/paperlike-ai.webp')}.card:nth-child(2){--drawing:url('/assets/paperlike-web.webp')}.card:nth-child(3){--drawing:url('/assets/paperlike-maintenance.webp')}.card:nth-child(4){--drawing:url('/assets/paperlike-wordpress.webp')}.card:nth-child(5){--drawing:url('/assets/paperlike-branding.webp')}.card:nth-child(6){--drawing:url('/assets/paperlike-content.webp')}.card .number{margin:0 0 5px;color:#171821;font-size:13px}.card h3{font-size:19px;line-height:1.15;letter-spacing:-.4px;margin-bottom:20px}.card h3 span{display:none}.card p{font-size:14px;color:#292a34;line-height:1.5}.feature{margin:0 3%;padding:40px 3%;gap:35px;grid-template-columns:.85fr 1.15fr;background:#efe3fa80;border:1px solid #a295b0;border-radius:2px 8px 3px 6px;color:#171821;box-shadow:none}.feature p,.feature .eyebrow{color:#292a34}.feature .text-link{color:#7020c2}.feature h2{font-size:36px}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;align-content:center}.workflow span,.workflow strong{background:transparent;color:#171821;border:0;border-radius:0;padding:115px 0 0;font-size:14px;line-height:1.5;font-weight:400;position:relative}.workflow span:before,.workflow strong:before{content:'';position:absolute;top:0;left:0;width:100%;height:105px;background:var(--drawing) center/contain no-repeat}.workflow span:nth-child(1){--drawing:url('/assets/paperlike-content.webp')}.workflow span:nth-child(2){--drawing:url('/assets/paperlike-web.webp')}.workflow strong{--drawing:url('/assets/paperlike-understand.webp')}.workflow span:nth-child(4){--drawing:url('/assets/paperlike-build.webp')}.workflow small{grid-column:1/-1;color:#34313c;margin-top:20px}.three{gap:28px;margin-top:26px}.three article{border-top:0;border-right:1px solid #b5b4a9;padding:15px 15px 10px 37%;position:relative}.three article:last-child{border-right:0}.three article:before{content:'';position:absolute;left:0;top:0;width:33%;height:125px;background:var(--drawing) center/contain no-repeat}.three article:nth-child(1){--drawing:url('/assets/paperlike-understand.webp')}.three article:nth-child(2){--drawing:url('/assets/paperlike-build.webp')}.three article:nth-child(3){--drawing:url('/assets/paperlike-care.webp')}.three h3{font-size:20px}.three p{font-size:14px;color:#292a34}.closing{background:transparent;border:1px solid #f04c9b;border-radius:50% 40% 45% 35%;margin:10px 5.5% 35px;padding:35px 7%;}.closing h2{font-size:38px;max-width:70%}.closing .cta{right:2%;bottom:42px}footer{padding:25px 5.5%;border-top:1px solid #8a8b83;gap:25px;color:#353641}footer img{margin-bottom:10px}.copyright{border-color:#bbb9ad}.mobile-nav-toggle{background:transparent;color:#171821}.service-nav-panel{background:#faf8ef;color:#171821}
@media(max-width:1000px){.hero{min-height:480px}.hero:after{height:430px}.hero .eyebrow{white-space:normal}.cards{grid-template-columns:repeat(2,1fr)}.three article{padding-left:0;padding-top:120px}.three article:before{width:105px}.closing h2{max-width:60%}.workflow{gap:5px}.feature{gap:20px}}
@media(max-width:600px){header{padding:18px 6%;gap:15px}.brand img{width:172px}header>.cta{font-size:12px;padding:11px 15px}.hero{padding:35px 6% 320px;min-height:0}.hero:after{top:auto;bottom:0;right:4%;width:92%;height:310px}.hero h1{font-size:45px}.hero .lead{font-size:17px}.principles{margin:0 6%;gap:12px;padding:20px 0}.principles span{font-size:14px}.principles span:before{height:40px;flex-basis:45px}.section{padding:32px 6%}.cards{grid-template-columns:1fr;gap:15px}.card{min-height:170px;padding:22px 20px 22px 43%}.card h3{font-size:20px}.card h3,.card p{max-width:220px}.card:before{width:35%}.feature{grid-template-columns:1fr;padding:30px 6%}.feature h2{font-size:32px}.workflow{grid-template-columns:repeat(2,1fr);gap:20px}.workflow span,.workflow strong{padding-top:95px}.workflow span:before,.workflow strong:before{height:90px}.three{grid-template-columns:1fr;gap:18px}.three article{padding:8px 0 10px 115px;border:0;min-height:115px}.three article:before{width:100px;height:105px}.closing{border-radius:25px;padding:28px 7%;margin:0 5% 30px}.closing h2{font-size:32px;max-width:none}.closing .cta{position:static;margin-top:10px}footer{padding:26px 6%}.footerlinks{gap:15px}.copyright{margin:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep existing line-break semantics while giving inline headings visual spacing. */
.hero{background:transparent}.section-head h2,.approach>h2,.closing h2{font-weight:650}.section-head h2 br,.approach>h2 br,.closing h2 br{display:inline-block;width:.24em}.cta{background:transparent url('/assets/paperlike-cta-pink.webp') center/100% 100% no-repeat;clip-path:none;filter:drop-shadow(1px 3px 2px #28201c22);box-shadow:none}header>.cta{background:transparent url('/assets/paperlike-cta-white.webp') center/100% 100% no-repeat;border:0}
@media(max-width:600px){header.has-mobile-nav .brand img{width:164px}header.has-mobile-nav>.cta{padding:11px 15px;font-size:12px}}
.section-head h2 br,.approach>h2 br,.closing h2 br{display:none}
/* Real IMG nodes use the CMS's existing image controls; decorative alt text stays empty. */
.hero:after,.card:before,.principles span:before,.workflow span:before,.workflow strong:before,.three article:before{display:none}.hero>.image-frame{position:absolute;z-index:-1;right:2.5%;top:10px;width:51%;height:520px;object-fit:contain}.card>.image-frame{position:absolute;left:4%;top:17%;width:39%;height:70%;object-fit:contain}.principles span>.image-frame{width:55px;height:55px;object-fit:contain;margin-right:15px;flex:0 0 55px}.workflow .image-frame{position:absolute;top:0;left:0;width:100%;height:105px;object-fit:contain}.three article>.image-frame{position:absolute;left:0;top:0;width:33%;height:125px;object-fit:contain}@media(max-width:1000px){.hero>.image-frame{height:430px}.three article>.image-frame{width:105px}}@media(max-width:600px){.hero>.image-frame{top:auto;bottom:0;right:4%;width:92%;height:310px}.card>.image-frame{width:35%}.principles span>.image-frame{height:40px;width:45px;flex-basis:45px}.workflow .image-frame{height:90px}.three article>.image-frame{width:100px;height:105px}}
/* Large bold button labels retain accessible contrast against Hakusana pink. */
main .cta{font-size:19px;font-weight:700}.principles,.workflow,.eyebrow{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:400}

/* Consolidated homepage review: stable paper colour in every interactive state. */
.cta{--cta-paper:url('/assets/paperlike-cta-pink.webp');--cta-ink:#fff;transform:rotate(-1deg);filter:drop-shadow(1px 3px 2px #28201c22);transition:transform 300ms ease-in-out,filter 300ms ease-in-out}
header>.cta{--cta-paper:url('/assets/paperlike-cta-white.webp');--cta-ink:#181923}
.cta,.cta:hover,.cta:focus-visible,.cta:active{background:transparent var(--cta-paper) center/100% 100% no-repeat;color:var(--cta-ink);opacity:1}
.cta:focus-visible{outline:3px solid #6422b7;outline-offset:6px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.cta:hover{transform:translateY(-3px) rotate(-1deg);filter:drop-shadow(1px 7px 4px #28201c33)}}
@media(prefers-reduced-motion:no-preference){.cta:focus-visible{transform:translateY(-3px) rotate(-1deg);filter:drop-shadow(1px 7px 4px #28201c33)}}
@media(prefers-reduced-motion:reduce){.cta,.cta:hover,.cta:focus-visible{transform:rotate(-1deg);transition:none;filter:drop-shadow(1px 3px 2px #28201c22)}}
.workflow{text-align:left;column-gap:20px}.workflow>span,.workflow>strong{text-align:left;line-height:1.45}.workflow .image-frame{object-position:left center}.workflow>small{text-align:left}
.closing{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 28px;position:relative;isolation:isolate;border:0;border-radius:0;padding:52px 6%;margin:15px 4% 45px;background:transparent}
.closing:before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/paperlike-pencil-outline.svg') center/100% 100% no-repeat;pointer-events:none}
.closing>.eyebrow{grid-column:1;grid-row:1;margin:0}.closing>h2{grid-column:1;grid-row:2;max-width:none;margin:0;font-size:clamp(30px,2.7vw,40px);line-height:1.18}
.closing>.cta{grid-column:2;grid-row:1/3;position:relative;right:auto;bottom:auto;justify-self:end;align-self:center;margin:0}
footer{max-width:none;padding:44px max(5.5%,calc((100vw - 1280px)/2)) 28px;border-top:0;background:linear-gradient(180deg,#030303 0%,#111112 100%);color:#f2f0e9;position:relative;isolation:isolate;overflow:hidden}
footer:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/paperlike-charcoal-texture.webp') center/900px auto repeat;mix-blend-mode:screen;opacity:.30}
footer a,footer p{color:#f2f0e9}footer a:hover{color:#f9a9d0}footer a:focus-visible{outline-color:#f9a9d0}.copyright{border-color:#ffffff30;color:#d8d5ce}footer img{width:218px;height:auto;max-width:100%}
@media(max-width:1000px){.workflow{column-gap:14px}.closing{grid-template-columns:1fr;padding:48px 7%;gap:18px}.closing:before{background-image:url('/assets/paperlike-pencil-outline-mobile.svg')}.closing>.cta{grid-column:1;grid-row:3;justify-self:start}.closing>h2{max-width:100%}}
@media(max-width:600px){.workflow{gap:22px 16px}.closing{padding:40px 10%;margin:8px 3% 32px;gap:18px}.closing>h2{font-size:31px}.closing>.cta{font-size:17px;max-width:100%;padding:16px 19px;gap:17px}footer{padding:38px 6% 25px}.footerlinks{gap:14px 18px}}
main .cta{max-width:100%;white-space:normal;min-width:0}.closing>.cta{font-size:19px}.cta>span{flex-shrink:0}
/* Continue charcoal through the existing 90px AMY launcher clearance. */
footer{margin-bottom:-90px;padding-bottom:118px}@media(max-width:600px){footer{padding-bottom:115px}}

/* Charcoal loop: pigment approaches the section edges, clear of live content. */
.closing{margin-left:20px;margin-right:20px}
.closing:before{background-image:url('/assets/paperlike-pencil-outline.svg?v=charcoal-2')}
@media(max-width:1000px){.closing:before{background-image:url('/assets/paperlike-pencil-outline-mobile.svg?v=charcoal-2')}}
