@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
:root{--jd-bg:#f7f7f3;--jd-ink:#142629;--jd-ocean:#28565c;--jd-coral:#f17850;--jd-border:#e0e5e2;--jd-surface:#fff;--jd-radius:8px;--jd-sans:'Archivo',Arial,sans-serif;--jd-serif:'Instrument Serif',Georgia,serif}
/* Explicit section scope: the approved hero and project dialogs stay untouched. */
.phase1 .product-work,.discover-also,.services.services-cards,.lab,.about{background:var(--jd-bg);color:var(--jd-ink);font-family:var(--jd-sans)}
.phase1 .product-work::before,.lab::before,.about::before,.services::before{display:none}
.lab,.about,.services.services-cards{padding:48px 5vw}
.phase1 .product-work .work-heading h2,.services-cards .services-heading h2,.lab-heading h2,.about-copy h2,.discover-copy h3{font-family:var(--jd-serif);font-weight:400;font-size:clamp(34px,3.3vw,54px);letter-spacing:-.025em;color:var(--jd-ink)}
.phase1 .product-work .work-heading h2 em,.lab-heading h2 span,.about-copy h2 span{color:var(--jd-ocean)}
.phase1 .product-work .work-feature{border-radius:var(--jd-radius);border-color:var(--jd-border)}
.phase1 .product-work .work-relay{background:#eeeee8;color:var(--jd-ink)}
.phase1 .product-work .work-rove{background:var(--jd-ink);color:#f7f7f3}
.phase1 .product-work .work-copy h3{font-family:var(--jd-serif);font-weight:400}
.phase1 .product-work .work-description{font-size:16px;line-height:1.65;color:inherit}
.phase1 .product-work .work-tags,.phase1 .product-work .work-index{font-family:var(--jd-sans);font-size:11px;color:inherit}
.phase1 .product-work .work-link{font-family:var(--jd-sans);font-size:14px;color:inherit}
.discover-copy h3{font-size:36px}.discover-copy p{color:var(--jd-ocean)}
.services-cards .service-card,.services-cards .service-card-primary,.services-cards .service-card:nth-child(n){background:var(--jd-surface);border-color:var(--jd-border);border-radius:var(--jd-radius);box-shadow:none;padding:24px}
.services-cards .service-card-title h3{font-family:var(--jd-sans);font-size:22px;line-height:1.25;letter-spacing:-.025em;color:var(--jd-ink)}
.services-cards .service-card p{font-size:16px;line-height:1.65;color:var(--jd-ocean)}
.services-cards .offer-number,.services-cards .service-card-number,.services-cards .service-card-title svg{color:var(--jd-ocean)}
.lab .lab-item{background:var(--jd-surface);border:1px solid var(--jd-border);border-radius:var(--jd-radius);padding:24px;box-shadow:none;transform:none}
.lab .lab-item h3{font-family:var(--jd-sans);font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em;color:var(--jd-ink)}
.lab .lab-item>p,.lab-intro,.about-copy>p,.about-exploration p{font-family:var(--jd-sans);font-size:16px;line-height:1.7;color:var(--jd-ocean)}
.lab .lab-tags li{background:transparent;border:1px solid var(--jd-border);border-radius:4px;padding:6px 8px;font-size:11px;color:var(--jd-ocean)}
.lab .lab-gallery-open,.lab .lab-item a{font-family:var(--jd-sans);background:none;box-shadow:none;border:0;border-bottom:1px solid var(--jd-border);border-radius:0;color:var(--jd-ink);font-size:14px;min-height:44px}
.lab-heading,.about-marker{border-color:var(--jd-border)}
.about-portrait,.about-exploration{background:var(--jd-surface);border:1px solid var(--jd-border);border-radius:var(--jd-radius);box-shadow:none}
.about-copy h2{margin-bottom:24px}.about-exploration a{color:var(--jd-ocean)}
.contact{background:var(--jd-ink);color:var(--jd-bg);padding:56px 5vw 48px;font-family:var(--jd-sans)}
.contact::before{display:none}.contact-marker{color:#d4dfdc;border-color:#ffffff28}
.contact h2{font-family:var(--jd-serif);font-size:clamp(44px,5vw,76px);font-weight:400;letter-spacing:-.025em;color:var(--jd-bg)}
.contact h2 span{color:#f6ab90}.contact-intro,.contact .availability,.contact-socials a{color:#e0e5e2}
.contact-intro{font-size:16px;line-height:1.65}.contact-email{color:var(--jd-bg);border-color:#f1785080;font-size:clamp(22px,3vw,42px);overflow-wrap:anywhere}
.contact+.site-footer{background:var(--jd-ink);color:var(--jd-bg);padding:24px 5vw 32px;min-height:0;border-top:1px solid #ffffff24;font-family:var(--jd-sans)}
.contact+.site-footer::before,.contact+.site-footer::after{display:none}.site-footer .footer-description{color:#e0e5e2;font-size:12px}.site-footer .footer-copyright{color:#e0e5e2}
@media(hover:hover){.services-cards .service-card:hover,.lab .lab-item:hover{border-color:#28565c60;background:var(--jd-surface);box-shadow:none;translate:0 -2px}.contact a:hover,.discover-copy button:hover{color:#f6ab90}}
@media(max-width:760px){.lab,.about,.services.services-cards{padding:32px 6vw}.lab .lab-item{padding:20px}.lab-grid{gap:16px}.about-layout{gap:24px}.contact{padding:40px 6vw 32px}.contact+.site-footer{padding:24px 6vw 28px}.phase1 .product-work .work-description{font-size:16px}.lab-heading h2,.about-copy h2,.services-cards .services-heading h2{font-size:36px}.about-portrait figcaption{flex-wrap:wrap}.about-portrait figcaption>span:last-child{max-width:100%;text-align:left}.contact-email{font-size:clamp(20px,5.7vw,28px)}}
@media(prefers-reduced-motion:reduce){.lab .lab-item,.services-cards .service-card{transition:none;translate:none!important}}

/* User-requested footer image trial. */
.contact+.site-footer{background:#142629 url('assets/footer-mer-test.png') center 68%/cover no-repeat;min-height:220px;padding-top:64px;padding-bottom:32px}
.contact+.site-footer::before{display:block;content:'';position:absolute;inset:0;background:linear-gradient(180deg,#142629 0%,#14262955 45%,#14262988 100%);z-index:-1}
@media(max-width:760px){.contact+.site-footer{min-height:220px;background-position:center center;padding-top:48px;padding-bottom:28px}}

/* Final contact/ocean-footer refinement; all preceding sections preserved. */
.contact{background:#f7f7f3;color:#142629;padding:64px 5vw 56px}
.contact h2{color:#142629}.contact h2 span{color:#f17850}
.contact .contact-marker{color:#28565c;border-color:#e0e5e2}
.contact .contact-intro,.contact .availability,.contact .contact-socials a{color:#28565c}
.contact .contact-email{color:#142629;border-color:#f1785070}
.contact .contact-bottom{margin-top:32px}
.contact+.site-footer{background:#142629 url('assets/footer-mer-test.png') center center/cover no-repeat;min-height:clamp(300px,39vw,560px);padding:40px 5vw 32px;align-items:flex-end;isolation:isolate;border-top:0;color:#f7f7f3}
.contact+.site-footer::before{display:block;background:linear-gradient(180deg,transparent 40%,#0b181b28 65%,#0b181bc9 100%)}
.site-footer .footer-identity{max-width:75%;gap:12px}
.site-footer .footer-description,.site-footer .footer-copyright{color:#f7f7f3}
@media(hover:hover){.contact a:hover{color:#a74325}}
@media(max-width:760px){.contact{padding:40px 6vw 40px}.contact+.site-footer{min-height:320px;padding:28px 6vw;flex-direction:row;align-items:flex-end;gap:16px;background-position:center center}.site-footer .footer-identity{max-width:75%}.site-footer .footer-description{font-size:11px;max-width:30ch}.site-footer .footer-copyright{font-size:10px}}

/* Compact ocean footer. */
.contact+.site-footer{min-height:220px;padding:28px 5vw 24px;background-position:center 62%}
@media(max-width:760px){.contact+.site-footer{min-height:200px;padding:24px 6vw;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px}.site-footer .footer-identity{max-width:100%}.site-footer .footer-description{max-width:100%}.site-footer .footer-copyright{align-self:flex-end}}

/* Fade the light Contact section into the ocean footer. */
.contact+.site-footer::after{display:block;content:'';position:absolute;left:0;right:0;top:-1px;bottom:auto;height:76px;background:linear-gradient(180deg,#f7f7f3 0%,#f7f7f3b3 28%,#f7f7f340 62%,transparent 100%);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask-image:linear-gradient(#000 0%,#000b3 45%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000b3 45%,transparent 100%);pointer-events:none;z-index:-1}
@media(max-width:760px){.contact+.site-footer::after{height:60px}}

/* Softer cinematic transitions with gradual opacity. */
.phase1 .hero-shell::after{height:120px;background:linear-gradient(180deg,#f7f7f300 0%,#f7f7f30a 18%,#f7f7f326 38%,#f7f7f363 60%,#f7f7f3b8 82%,#f7f7f3 100%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:none;-webkit-mask-image:none}
.contact+.site-footer::after{height:86px;background:linear-gradient(180deg,#f7f7f3 0%,#f7f7f3b8 18%,#f7f7f363 40%,#f7f7f326 62%,#f7f7f30a 82%,#f7f7f300 100%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
@media(max-width:760px){.phase1 .hero-shell::after{height:88px}.contact+.site-footer::after{height:68px}}

/* Readable mobile navigation over the light glass panel. */
@media(max-width:760px){
 .phase1 .hero-shell .site-nav a{color:#142629}
 .phase1 .hero-shell .site-nav a:hover{color:#142629;background:#1426290a;border-radius:4px}
 .phase1 .hero-shell .site-nav a:focus-visible{color:#142629;background:#1426290a;outline:2px solid #28565c;outline-offset:-2px;border-radius:4px}
}

/* Accessible coral text on the ivory Contact background. */
.contact h2 span{color:#c95532}

/* Draw UI arrows so iOS never substitutes emoji glyphs. */
.arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0;overflow:visible}
.site-nav .arrow-icon{margin-inline-start:.35em}

/* Reserve a clear area for the hero caption above its 88px mobile fade. */
@media(max-width:760px){
 .phase1 .product-hero.editorial-hero{padding-bottom:112px}
 .phase1 .editorial-hero .immersive-footnote{position:relative;z-index:1;font-size:11px;line-height:1.6;max-width:100%;text-wrap:balance}
}