/* Keep original art continuous and preserve real, readable HTML copy. */
#site-header,#site-footer{isolation:isolate;background:#fdede1}
.brand img,.footer-brand img{mix-blend-mode:darken}
.divider:after{mix-blend-mode:multiply}
.original-icon{mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}

/* P1 uses one continuous backdrop; no separate ribbon is laid over the baby. */
.home-hero{isolation:isolate;background:#fff3e8}
.home-hero .wrap{min-height:510px;padding-top:24px;padding-bottom:80px;z-index:1}
.home-copy{width:56%;padding:0}
.home-hero-art{position:absolute;left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:none;height:auto;object-fit:contain;object-position:center bottom;margin:0;mask-image:linear-gradient(180deg,transparent,#000 5%,#000);z-index:0}
.home-ribbon{display:none}

/* P2 gives the globe its own square space instead of cropping it in a strip. */
.about-grid{grid-template-columns:230px minmax(0,1fr) 350px;column-gap:24px}
.about-copy{min-width:0;padding:18px 0 30px}
.about-copy p{line-height:1.85}
.about-globe{display:block;width:100%;max-width:350px;height:auto;aspect-ratio:454/462;object-fit:contain;object-position:center;align-self:center;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;mix-blend-mode:multiply}

/* A transparent, human-free ribbon is shared by the remaining page sections. */
.about-hero:after,.original-hero:after,.cta-section:after{background-image:url('/assets/original/ribbon-clean-v3.png');background-repeat:no-repeat;background-position:center center;background-size:100% 315%;height:100px;pointer-events:none}
.about-hero:before,.original-hero:before{mix-blend-mode:multiply;mask-image:linear-gradient(90deg,#000 35%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 80%,transparent);mask-composite:intersect;pointer-events:none}
.original-hero{isolation:isolate}
.original-hero .wrap{grid-template-columns:minmax(0,62%) minmax(0,38%);padding-bottom:105px}
.page-hero-globe{left:0;width:100%;max-width:none;height:360px;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 85%,transparent);mask-composite:intersect;mix-blend-mode:multiply}
.page-method .page-hero-globe{height:385px}

/* P3 scenes fill the cards continuously, including behind the reading area. */
.service-row{position:relative;isolation:isolate;display:block;min-height:590px;padding:28px 25px 170px;background:#fff3e8}
.service-row .service-top,.service-row h3,.service-row p{position:relative;z-index:1}
.service-row h3{margin:-3px 0 20px 95px;min-height:0}
.service-row p{margin:0;max-width:95%;font-size:1.075rem;line-height:1.8;text-shadow:0 1px 8px #fff6ed}
.service-row .service-illustration{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;object-fit:cover;object-position:center bottom;mask-image:none;border-radius:0;margin:0;z-index:-1}

/* Edge blending keeps the CTA surface continuous across all viewport widths. */
.cta-section{isolation:isolate;padding:42px 0 125px;background:linear-gradient(110deg,#fff7ec,#fbe8db);border:0}
.cta-section .wrap{position:relative;z-index:2;background:transparent}
.cta-section:before{left:0;bottom:30px;width:210px;height:240px;background-size:contain;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,#000 25%,transparent),linear-gradient(180deg,transparent,#000 30%,#000 72%,transparent);mask-composite:intersect;pointer-events:none;z-index:0}
.cta-section:after{z-index:1;height:115px}
.page-about .cta-section .wrap:after,.page-services .cta-section .wrap:after{right:-65px;bottom:-95px;width:360px;height:240px;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at 70% 65%,#000 20%,transparent 74%);mask-composite:add}
.page-services .cta-section,.page-method .cta-section{min-height:205px;padding-top:32px;padding-bottom:125px}

@media(min-width:1600px){.home-hero .wrap{min-height:560px}}
@media(min-width:1001px) and (max-width:1250px){.about-grid{grid-template-columns:205px minmax(0,1fr) 300px;column-gap:20px}}
@media(min-width:701px) and (max-width:1000px){.about-grid{grid-template-columns:190px minmax(0,1fr);gap:20px}.about-globe{grid-column:1/-1;width:310px;justify-self:center;margin:0 0 25px}.service-row{padding:24px 20px 160px}.service-row h3{margin-left:0;margin-top:10px}.service-row p{font-size:1.025rem;max-width:100%}.original-hero .wrap{grid-template-columns:minmax(0,60%) minmax(0,40%)}.page-hero-globe{height:320px}.page-method .page-hero-globe{height:345px}}
@media(max-width:700px){
 .home-hero .wrap{min-height:0;padding:28px 0 10px}
 .home-copy{width:100%}
 .home-hero-art{position:relative;left:0;top:auto;bottom:auto;transform:none;width:100%;height:260px;object-fit:cover;object-position:right bottom;margin:0;mask-image:linear-gradient(180deg,transparent,#000 12%,#000)}
 .about-grid{grid-template-columns:1fr;gap:0}
 .about-copy{padding:20px 0 18px}
 .about-copy h1{font-size:2.6rem}
 .about-globe{grid-column:auto;width:85%;max-width:350px;height:auto;object-fit:contain;aspect-ratio:454/462;order:2;justify-self:center;margin:0 0 25px}
 .metrics{padding-bottom:90px}
 .about-hero:after,.original-hero:after{height:75px}
 .original-hero .wrap{grid-template-columns:1fr;padding:35px 0 85px}
 .page-hero-globe,.page-method .page-hero-globe{height:auto;aspect-ratio:1.45;max-width:430px;object-fit:contain;object-position:center;left:0;width:100%;margin:20px auto 0}
 .service-row{padding:26px 25px 185px;min-height:560px}
 .service-row h3{margin:-3px 0 20px 96px}
 .service-row p{max-width:96%;font-size:1.1rem;line-height:1.8}
 .service-row .service-illustration{width:100%;height:100%;margin:0;object-position:center bottom}
 .cta-section{padding:38px 0 100px}
 .cta-section:before{width:135px;height:190px;bottom:15px}
 .cta-section:after{height:80px}
 .page-services .cta-section,.page-method .cta-section{padding:30px 0 100px;min-height:175px}
 .page-about .cta-section .wrap:after,.page-services .cta-section .wrap:after{right:-18px;bottom:-72px;width:180px;height:155px}
}