/* MOER / one material language from the first frame to the final conversation. */
:root{--atelier-dark:#0c2119;--atelier-soft:#bacebd;--atelier-edge:#718e7738}

/* Real 3D and the owner's image share the same measured, uncropped viewport. */
.kinetic-art{position:relative;grid-area:1/1;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 43% 35%,#f9fbf4 0,#e7eee1 65%,#dfe8d9 100%);touch-action:pan-y}
.kinetic-art[data-atelier-theme=dark]{background:radial-gradient(ellipse at 45% 40%,#244d37 0,#142e22 48%,#10251b 82%)}
main .services .kinetic-art .service-image,main .method-figure .kinetic-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important;will-change:auto;transition:opacity .4s;z-index:0}
.atelier-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;pointer-events:none;transition:opacity .45s}
.atelier-ready>.atelier-canvas{opacity:1}.atelier-ready>img,.atelier-ready>.atelier-monogram{opacity:0}
.atelier-custom>.atelier-canvas{opacity:0}.atelier-custom>img{opacity:1}
.atelier-monogram{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(64px,10vw,150px);font-weight:900;letter-spacing:-.09em;color:#9cc7ad;transition:opacity .4s}
html.atelier-images .kinetic-art>.atelier-canvas,html.cms-editing .kinetic-art>.atelier-canvas{opacity:0}
html.atelier-images .kinetic-art>img,html.cms-editing .kinetic-art>img,html.cms-editing .kinetic-art>.atelier-monogram{opacity:1}
html.atelier-images .signature-art>.atelier-canvas{opacity:1}
html.cms-editing .signature-art>.atelier-canvas{opacity:0}

/* An editorial identity spread, with a rotating MOER emblem as its signature. */
main .difference{position:relative;background:var(--atelier-dark);color:#eff4e8;border:0;overflow:clip;padding-top:clamp(76px,8vw,128px);padding-bottom:clamp(76px,8vw,128px)}
.difference-heading{position:relative;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0 8%;align-items:center;margin-bottom:56px}
.difference-heading>div:first-child{grid-column:1;grid-row:1}
main .difference .exp-label{color:#87d9ac;margin-bottom:29px}
main .difference h2{font-size:clamp(36px,4.5vw,72px);line-height:1.24;letter-spacing:-.065em;font-weight:550;color:#f0f5e9}
main .difference h2 em{color:#5bdda0}
main .difference .difference-lead{grid-column:1;grid-row:2;max-width:34em;margin:25px 0 0;color:#bdd1c2;font-size:16px;line-height:1.9}
.difference-signature{position:relative;grid-column:2;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:315px}
.signature-art{height:clamp(280px,25vw,390px);width:100%;flex:1;background:transparent!important}
.signature-note{font-size:12px;letter-spacing:.05em;line-height:1.7;color:#93b69f;text-align:center;padding-top:10px}
.difference-columns,.difference-row{grid-template-columns:minmax(120px,.5fr) minmax(0,.88fr) minmax(0,1.62fr)}
.difference-columns{border-color:#526f5e;color:#9db5a5}
.difference-columns>strong{background:#4c775d1f;color:#b5f0cc;font-weight:500;letter-spacing:0}
.difference-row{border-color:#58715c55}
.difference-stage{padding-top:32px}.difference-stage h3{color:#dce9dd;font-size:17px}
.difference-number{color:#82ad92}
.difference-basic p{color:#a3b6a8}
.difference-moer{background:#4c775d12;padding:31px 57px 31px 30px}
.difference-moer:before{background:#32d58d;width:2px}
.difference-moer h4{font-size:clamp(21px,2.25vw,34px);line-height:1.4;letter-spacing:-.05em;color:#edf5e6;margin-bottom:14px}
.difference-moer p{font-size:15px;line-height:1.85;color:#b9cebf;max-width:34em}
.difference-check{color:#66e7a5;right:23px;top:29px;font-size:27px}
.difference-output{color:#8dc8a4;border-color:#60816b44;font-size:12px;padding-top:13px;letter-spacing:.015em}
.difference-close{align-items:center;padding-top:36px}
.difference-close>p{color:#91b59e;font-size:clamp(20px,2.1vw,30px);line-height:1.6}
.difference-close strong{color:#e6f2df;font-weight:500}
.difference-close a{color:#c8e4ce;border-color:#789a7b}

/* Services become three sculptural spreads, each with a clear operational job. */
.services .service-row{background:#f6f7ee;border-color:#b7cbb660;box-shadow:0 20px 50px -40px #143e2460}
.services .service-row>div.service-body{background:#f6f7ee}
.services .service-body h3{font-size:clamp(28px,2.7vw,43px);font-weight:550;line-height:1.32;letter-spacing:-.06em}
main .services .service-body .service-overline{margin-bottom:24px}
main .services .service-body .number{font-weight:400;font-size:17px;color:#26885a}
main .services .service-body small{font-size:10px;letter-spacing:.065em;color:#657d67}
.services .service-context>strong{font-weight:500;color:#31543d}
main .services .service-scope li{border:0;border-left:1px solid #b6c8ae;border-radius:0;padding:0 10px;background:none;color:#3f644a}
main .services .service-scope li:first-child{padding-left:0;border-left:0}
main .services .service-art{border-left:1px solid #c7d5be66;background:#e7eee1;min-height:440px}
main .services .service-art:after{display:none}
main .services .service-art-top{top:23px;left:24px;right:24px;pointer-events:none}
main .services .service-art-word{font-size:clamp(16px,1.5vw,23px);font-weight:500;letter-spacing:-.035em;color:#2c573a;transform:none;max-width:19em}
main .services .service-art-index{font-size:10px;color:#68876b}
.services .service-viewfinder{display:none}
.service-art-explanation{background:#e9efe2;border-color:#cad7c0;padding:16px 24px 18px}
main .services .service-art-caption{font-size:13px;color:#33593e}
.service-visual-flow{font-weight:500;color:#275e3c}
.service-visual-flow>span{border-top-color:#b6cbae}
main .services .service-navigation{gap:34px}
main .services .service-navigation button{font-size:13px;letter-spacing:-.025em}
.services-outro{background:#e9ede3;padding-top:31px}
main .traffic-explainer{background:#e1e9da;border-top:1px solid #bdcdb5;padding-top:33px;padding-bottom:38px}
.traffic-explainer h3{font-weight:550}

/* Cinematic objects occupy the complete artwork area, with separate captions. */
main .method .method-intro h2{font-size:clamp(35px,4.3vw,67px);line-height:1.28;font-weight:500}
main .method .method-intro h2 em{color:#70d79c}
main .method-figure{border:0;background:transparent;overflow:hidden;min-height:360px}
main .is-cinematic .method-figure{clip-path:none;transform:none;will-change:auto}
main .method-figure figcaption{background:transparent;border-top:1px solid #56746070;padding:20px 4px 8px;min-height:80px;align-items:center}
main .method-figure figcaption strong{font-weight:500;font-size:17px;line-height:1.5;color:#e5efdf}
main .method-figure figcaption small{font-size:12px;color:#a3c0ac}
main .method-figure figcaption b{font-family:'DM Sans',sans-serif;font-size:46px;font-weight:300;color:#6fa484;opacity:.8}
main .method-copy h3{font-size:clamp(29px,3vw,47px);line-height:1.35;font-weight:500;letter-spacing:-.055em}
main .method-kicker{font-size:11px;color:#89b59c;margin-bottom:20px;letter-spacing:.06em}
main .method-kicker>span:first-child{border-radius:0;border:0;border-bottom:1px solid #638f74;width:34px;height:28px;color:#82e4aa;font-size:12px}
main .method-output{background:linear-gradient(90deg,#1e65402e,transparent);border-left-color:#66d89d;color:#c1d9c4;padding:13px 16px;font-size:13px}
main .method-nav{gap:24px}
main .method-nav button{font-size:13px;padding-top:15px;padding-bottom:15px}
main .method-nav button[aria-pressed=true]{color:#6ce1a0}
main .method-summary{border-top:1px solid #617d6155}

/* Quiet, consistent typography for the supporting editorial sections. */
main .intro-copy h2{font-size:clamp(29px,3.05vw,46px);line-height:1.4;font-weight:500}
main .principles strong{font-weight:500;font-size:18px;color:#d6ead8}
main .principles>div{border-bottom-color:#4d6d5559}
main .exp-section-head h2{font-size:clamp(34px,4vw,61px);line-height:1.3;font-weight:500;letter-spacing:-.055em}
main .exp-section-head h2 em{color:#297f51}
main .situation-panel{border:1px solid #afc4aa80;background:linear-gradient(130deg,#f8faf2,#edf2e4);box-shadow:none}
main .situation-tabs button{transition:background .3s,color .3s,border-color .3s}
main .situation-tabs button[aria-selected=true]{background:#173f2b;color:#ecf5e6;border-color:#173f2b}
main .channel-diagram{position:relative;background:transparent;border-width:1px 0;border-color:#b5c9ae;padding:23px 0;gap:18px}
main .channel-diagram strong{background:#1e5736;color:#eef7e5;border-radius:50%;min-width:90px;min-height:90px;display:grid;place-items:center;font-weight:500;box-shadow:0 0 0 8px #dce8d4,0 0 0 9px #bed3b4}
main .channel-diagram>span{font-size:13px}
main .channel-identity h3{font-weight:500;letter-spacing:-.055em}
main .report-workspace{box-shadow:0 22px 50px -32px #35543455;border-color:#a8bea1}
main .report-window-bar{background:#e3ebdc}
main .report-tabs button[aria-selected=true]{color:#1a683b}
main .report-panel-heading h3{font-weight:500;letter-spacing:-.045em}
main .report-commentary li{border-color:#b8cbb060}
main .rank-card{background:linear-gradient(145deg,#173c2a,#10291e);border-color:#7ca28440;box-shadow:none}
main .rank-card h3{font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.04em}
main .rank-card .rank-result strong{font-weight:400}
main .about h3{font-weight:500;line-height:1.45}
main .engagement-item{border-color:#b2c4a8}
main .engagement-item dt{font-size:19px;font-weight:500;letter-spacing:-.03em}
main .engagement-item dt>span{color:#4b8159}
main .onboarding{background:#c5e1b1;color:#123725}
main .onboarding h2{font-weight:500;letter-spacing:-.05em}
main .questions summary{font-weight:500}
main .questions details[open]{background:#edf3e5}
main .contact h2{font-size:clamp(34px,3.8vw,61px);font-weight:550;letter-spacing:-.055em;line-height:1.3}
main .contact #inquiry{background:#e9f2df;border:1px solid #2d683c4d;padding:clamp(23px,3vw,45px)}
main .contact input,main .contact textarea,main .contact select{background:transparent;border-color:#77976d;color:#173722}
main .contact .form-top{font-size:12px;letter-spacing:.04em;margin-bottom:30px}
main .contact .form-top small{font-size:12px;letter-spacing:0}
main .contact .form-note{font-size:13px;line-height:1.8;color:#3d6242}
main .contact #submit-inquiry{width:100%;font-size:14px;min-height:58px}

@media(max-width:1100px){
 .difference-heading{gap:0 4%}
 .difference-signature{min-height:280px}.signature-art{height:280px}
 .difference-columns,.difference-row{grid-template-columns:minmax(105px,.48fr) minmax(0,.85fr) minmax(0,1.67fr)}
 main .method-copy h3{font-size:32px}
}
@media(max-height:950px) and (min-width:701px){
 main .services .section-head h2{font-size:31px;line-height:1.3}
 main .services .service-body h3{font-size:30px}
 main .services .service-art{min-height:415px}
 main .services .service-body .service-overline{margin-bottom:18px}
}
@media(max-width:840px){
 .difference-heading{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:0 20px;margin-bottom:36px}
 .difference-heading>div:first-child{grid-column:1;grid-row:1}
 main .difference .difference-lead{grid-column:1/-1;grid-row:2;font-size:15px;margin-top:18px;max-width:40em}
 .difference-signature{grid-column:2;grid-row:1;min-height:220px}.signature-art{height:220px}.signature-note{font-size:10px;letter-spacing:0}
 .difference-columns{display:none}.difference-row{grid-template-columns:1fr;padding:25px 0}
 .difference-rows{border-top-color:#55745e}.difference-stage{padding:0 0 16px}
 .difference-basic{padding:0 0 18px 27px}.difference-mobile-label{color:#a0baa7}
 .difference-moer{padding:24px 47px 24px 25px}.difference-moer h4{font-size:25px}
 .difference-close{display:block}.difference-close a{display:inline-flex;margin-top:24px}
 main .method-figure{height:clamp(370px,60vw,540px)}
}
@media(max-width:700px){
 main .difference{padding-top:65px;padding-bottom:66px}
 .difference-heading{grid-template-columns:1fr;gap:0}
 .difference-heading>div:first-child{grid-row:1}
 main .difference h2{font-size:clamp(34px,9.3vw,52px);line-height:1.28}
 main .difference .difference-lead{grid-row:2;grid-column:1;margin-top:22px}
 .difference-signature{grid-column:1;grid-row:3;min-height:0;margin-top:12px}
 .signature-art{height:225px;flex:none;max-width:350px}.signature-note{font-size:11px;padding-top:0}
 .difference-heading{margin-bottom:30px}
 .difference-moer p{font-size:15px}.difference-output{font-size:12px}
 main .services .section-head h2{font-size:32px}
 main .services .service-art,main .services:not(.is-pinned):not(.services-measuring) .service-art{height:clamp(380px,110vw,475px);min-height:0;border-left:0}
 main .services .service-art-top{top:20px;left:20px;right:20px}
 main .services .service-art-word{font-size:18px}
 main .services .service-row>div.service-body{padding:30px 24px}
 main .services .service-body h3{font-size:29px}
 .service-art-explanation{padding:15px 20px 17px}
 main .services .service-navigation{gap:12px}
 main .services .service-navigation button{font-size:12px}
 main .method-figure{height:clamp(370px,108vw,485px);min-height:370px;max-height:none}
 main .method-figure figcaption{padding:17px 0 4px;min-height:76px}
 main .method-figure figcaption strong{font-size:16px}
 main .method-figure figcaption b{font-size:39px}
 main .method-copy h3{font-size:30px}
 main .method .method-intro h2{font-size:34px}
 main .method-nav{gap:12px}main .method-nav button{font-size:12px}
 main .channel-diagram{gap:10px}
 main .channel-diagram strong{min-width:76px;min-height:76px;padding:12px;font-size:13px}
 main .channel-diagram>span{font-size:12px}
 main .exp-section-head h2{font-size:34px}
 main .contact #inquiry{padding:26px 21px}
 main .contact h2{font-size:34px}
 main .engagement-item dt{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .atelier-canvas,.kinetic-art>img{transition:none!important}
}