/* OSM Differentiators v0.4 — editorial numbered statements + four-panel cinematic gallery */
.differ-section{--dg:#2f4f4f;--di:#132424;--dm:#526664;background:#fff;padding:20px 0 102px;overflow:hidden}
.differ-wrap{width:min(1190px,calc(100% - 64px));margin:0 auto}.section-index{color:#61827b;font-size:10px;letter-spacing:.29em;font-weight:900}
.differ-top{margin-bottom:55px}.differ-top h2{color:var(--di);font-size:clamp(30px,4.1vw,55px);line-height:1.13;letter-spacing:-.06em;font-weight:900;margin:20px 0}.differ-top h2 em{font-style:normal;color:var(--dg)}
.differ-top p{font-size:16px;line-height:1.6;color:var(--dm);margin:0}
.diff-principles{border-top:1px solid rgba(47,79,79,.26)}.diff-principle{display:grid;grid-template-columns:86px 1fr 44px;align-items:start;gap:22px;border-bottom:1px solid rgba(47,79,79,.2);padding:35px 5px;transition:padding .3s,background .3s;outline-offset:3px}.diff-principle:hover,.diff-principle:focus-visible,.diff-principle.is-highlighted{background:#f6f9f8;padding-left:20px;padding-right:18px}
.diff-count{font:900 11px Arial;letter-spacing:.16em;color:#7b9b8d;padding-top:7px}
.diff-copy h3{font-size:clamp(23px,2.5vw,36px);line-height:1.15;color:var(--di);letter-spacing:-.044em;font-weight:900;margin:0 0 12px;transition:color .25s}.diff-principle:hover h3,.diff-principle.is-highlighted h3{color:var(--dg)}
.diff-copy p{font-size:15px;line-height:1.74;color:var(--dm);margin:0;max-width:770px}
.diff-symbol{color:var(--dg);font-size:20px;transition:transform .3s}.diff-principle:hover .diff-symbol,.diff-principle.is-highlighted .diff-symbol{transform:translate(4px,-4px)}
.diff-gallery-intro{margin:100px 0 27px;display:flex;justify-content:space-between;align-items:baseline;gap:15px}.diff-gallery-intro p{font-size:13px;color:var(--dm);margin:0}
.diff-gallery{display:flex;width:100%;height:clamp(380px,41vw,560px);gap:8px;overflow:hidden}
.diff-panel{flex:1;min-width:0;position:relative;display:block;isolation:isolate;overflow:hidden;background:#dce5e3;color:#fff;transition:flex 650ms cubic-bezier(.16,1,.3,1);outline-offset:-4px}
.diff-panel:hover,.diff-panel:focus-visible,.diff-panel.is-active{flex:1.35}
.diff-panel img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.79);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;transform:scale(1.06)}
.diff-panel:hover img,.diff-panel:focus-visible img,.diff-panel.is-active img{transform:scale(1.13);filter:saturate(1.02)}
.diff-panel-dark{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,35,30,.37) 0%,transparent 30%,rgba(9,26,26,.85) 100%)}
.diff-panel::before{content:"";position:absolute;z-index:4;left:0;top:0;height:3px;width:0;background:#c6dbd2;transition:width .5s}.diff-panel:hover::before,.diff-panel:focus-visible::before,.diff-panel.is-active::before{width:100%}
.diff-panel-index{position:absolute;z-index:3;left:19px;top:20px;font-size:10px;font-weight:800;letter-spacing:.22em}
.diff-panel-title{position:absolute;z-index:3;left:19px;bottom:28px;right:14px;font-size:clamp(19px,2.2vw,30px);line-height:1.08;letter-spacing:-.045em;font-weight:900;text-wrap:balance}
.preview-note{font-size:10px;color:#81938c;letter-spacing:.02em;margin:17px 0 0;text-align:right}
.internal-page.motion-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.internal-page.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:800px){.differ-wrap{width:calc(100% - 34px)}.differ-section{padding:8px 0 65px}.differ-top{margin-bottom:38px}.diff-principle{grid-template-columns:38px 1fr 22px;gap:12px;padding:25px 0}.diff-copy p{font-size:14px}.diff-gallery-intro{margin-top:65px;flex-direction:column;gap:10px}.diff-gallery{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.diff-panel{height:270px;flex:none}.diff-panel-title{font-size:clamp(19px,4vw,26px)}.diff-panel:hover,.diff-panel.is-active{flex:none}}
@media(max-width:430px){.diff-panel{height:225px}.diff-panel-title{left:12px;bottom:18px;font-size:18px}.diff-panel-index{left:12px;top:15px;font-size:9px}.diff-count{font-size:9px}}
@media(prefers-reduced-motion:reduce){.differ-section *, .differ-section *::before,.differ-section *::after{animation:none!important;transition:none!important}.internal-page.motion-ready [data-reveal]{opacity:1!important;transform:none!important}}

/* v0.5 — Strong editorial numbering; statements are informational, not links. */
.diff-principle{grid-template-columns:clamp(96px,10vw,146px) minmax(0,1fr);gap:clamp(20px,4vw,62px);align-items:center;min-height:170px;padding:28px 14px 30px 4px;cursor:default}
.diff-principle:hover,.diff-principle.is-highlighted{padding-left:4px;padding-right:14px;background:linear-gradient(90deg,rgba(47,79,79,.024),transparent 75%)}
.diff-count{font-size:clamp(62px,7.9vw,112px);font-weight:900;line-height:1;letter-spacing:-.085em;padding:0;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;color:var(--dg);background:linear-gradient(135deg,#2f4f4f 0%,#2f4f4f 37%,#a3c4b7 49%,#2f4f4f 62%,#2f4f4f 100%);background-size:250% 250%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:diffNumberGleam 7s ease-in-out infinite}
.diff-principle:nth-child(2) .diff-count{animation-delay:-1.5s}.diff-principle:nth-child(3) .diff-count{animation-delay:-3s}.diff-principle:nth-child(4) .diff-count{animation-delay:-4.5s}
.diff-copy h3{font-size:clamp(25px,2.7vw,38px);margin-bottom:12px}.diff-copy p{max-width:700px}
@keyframes diffNumberGleam{0%,100%{background-position:95% 55%}50%{background-position:0% 45%}}
/* Odd rows slide from left, even rows from right; revealed as they scroll into view. */
.internal-page.motion-ready .diff-principle[data-reveal]{opacity:0;transform:translate3d(-105px,0,0);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1),background .25s}
.internal-page.motion-ready .diff-principle[data-reveal]:nth-child(even){transform:translate3d(105px,0,0)}
.internal-page.motion-ready .diff-principle[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0)}
.internal-page.motion-ready .diff-principle.is-visible .diff-count{animation:diffNumberPop 1.15s cubic-bezier(.16,1,.3,1) both,diffNumberGleam 7s ease-in-out 1.2s infinite}
@keyframes diffNumberPop{0%{opacity:.1;transform:translateY(30px) scale(.8);filter:blur(3px)}70%{opacity:1;filter:blur(0)}100%{transform:translateY(0) scale(1);opacity:1}}
@media(max-width:800px){.diff-principle{grid-template-columns:72px minmax(0,1fr);gap:17px;padding:24px 2px;min-height:145px}.diff-count{font-size:clamp(56px,10vw,76px)}.internal-page.motion-ready .diff-principle[data-reveal]{transform:translate3d(-47px,0,0)}.internal-page.motion-ready .diff-principle[data-reveal]:nth-child(even){transform:translate3d(47px,0,0)}}
@media(max-width:430px){.diff-principle{grid-template-columns:65px minmax(0,1fr);gap:14px}.diff-count{font-size:60px}.diff-copy h3{font-size:24px}.diff-copy p{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.diff-count{animation:none!important}.internal-page.motion-ready .diff-principle[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* ===================== v0.6 REFINEMENTS ===================== */
/* Center the statement and supporting copy. */
.differ-top{text-align:center;max-width:980px;margin:0 auto 56px}
.differ-top h2{margin:16px auto 15px;max-width:900px;text-wrap:balance}
.differ-top p{max-width:620px;margin:0 auto}

/* Medium editorial numerals, still with gleam and arrival animation. */
.diff-principle{position:relative;grid-template-columns:clamp(66px,7vw,90px) minmax(0,1fr);gap:clamp(18px,3vw,40px);cursor:default;border:2px solid transparent;border-bottom-color:rgba(47,79,79,.20);padding:30px 20px 32px 12px;min-height:152px;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.diff-count{font-size:clamp(42px,5.1vw,70px);letter-spacing:-.07em;line-height:1}
.diff-principle:hover,.diff-principle.is-highlighted{padding:30px 20px 32px 12px;background:linear-gradient(100deg,rgba(47,79,79,.065),rgba(47,79,79,.012) 86%);border-color:rgba(47,79,79,.64);box-shadow:inset 3px 0 0 #2f4f4f,0 12px 30px rgba(23,58,51,.065)}
.diff-principle.is-scroll-active:not(.is-highlighted){background:linear-gradient(100deg,rgba(47,79,79,.052),rgba(47,79,79,.015) 88%);border-color:rgba(47,79,79,.42);box-shadow:inset 3px 0 0 rgba(47,79,79,.84)}
.diff-principle, .diff-principle *{cursor:default}

/* True off-canvas entry, alternating directions.
   Detached anchors in JS trigger reveal; observing moved blocks would deadlock. */
.diff-reveal-anchor{display:block;width:1px;height:1px;margin-bottom:-1px;pointer-events:none;opacity:0}
.internal-page.motion-ready .diff-principle[data-reveal]{opacity:0;transform:translate3d(calc(-100vw - 100%),0,0);filter:blur(6px);transition:transform 1.35s cubic-bezier(.16,1,.3,1),opacity 1.2s ease,filter 1.3s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;will-change:transform,opacity}
.internal-page.motion-ready .diff-principle[data-reveal]:nth-of-type(even){transform:translate3d(calc(100vw + 100%),0,0)}
.internal-page.motion-ready .diff-principle[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0);will-change:auto}
/* The arrival animation plays only once. Number glints continue afterward. */
.internal-page.motion-ready .diff-principle.is-visible .diff-count{animation:diffNumberPop 1.15s cubic-bezier(.16,1,.3,1) both,diffNumberGleam 7s ease-in-out 1.2s infinite}

/* Gallery is visual content, not a set of links. */
.diff-panel,.diff-panel *{cursor:default}
.diff-gallery-intro{margin:90px 0 30px;display:block}
.diff-gallery-intro h2{margin:0;font-size:clamp(25px,3.25vw,44px);line-height:1.1;letter-spacing:-.043em;font-weight:900;color:#2f4f4f}
.diff-gallery-intro::after{content:"";display:block;width:78px;height:3px;margin-top:18px;background:#2f4f4f;animation:diffUnderline 4.8s ease-in-out infinite;transform-origin:left}
@keyframes diffUnderline{0%,100%{transform:scaleX(.35);opacity:.35}50%{transform:scaleX(1);opacity:1}}

@media(max-width:800px){
 .differ-top{margin-bottom:40px}
 .diff-principle{grid-template-columns:62px minmax(0,1fr);gap:14px;min-height:140px;padding:23px 8px}
 .diff-principle:hover,.diff-principle.is-highlighted{padding:23px 8px}
 .diff-count{font-size:clamp(39px,8vw,55px)}
 .diff-gallery-intro{margin-top:65px}
}
@media(max-width:430px){
 .diff-principle{grid-template-columns:52px minmax(0,1fr);gap:12px}
 .diff-count{font-size:43px}
 .diff-copy h3{font-size:23px}
 .diff-copy p{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
 .internal-page.motion-ready .diff-principle[data-reveal]{opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important;transition:none!important}
 .diff-gallery-intro::after{animation:none!important;transform:none!important;opacity:1!important}
}