/* OSM SERVICES / v0.5 — tailored architectural editorial system */
.services-page{background:#fff;overflow:hidden;--sg:#2f4f4f;--sd:#0e2422;--so:#b9d2c8;--st:#586c67}
.services-wrap{width:min(1220px,calc(100% - 84px));margin-inline:auto}
.services-hero h2{font-size:clamp(58px,8.45vw,122px);letter-spacing:-.079em;line-height:.91;margin:39px 0 63px;font-weight:900;max-width:1150px;animation:serviceHeroIn 1.3s .34s both}
.services-hero h2 span{color:transparent;-webkit-text-stroke:1.5px rgba(236,250,245,.9)}
.services-list{padding:66px 0 80px;position:relative;background:linear-gradient(90deg,#fff,#f9fbfa 50%,#fff)}
.services-intro{display:grid;grid-template-columns:1fr 225px;align-items:end;gap:40px;margin:0 0 46px}
.services-section-label{display:flex;align-items:center;gap:14px;color:#538076;font-size:10px;letter-spacing:.3em;font-weight:900}
.services-section-label .short-line{width:42px;height:2px;background:currentColor}
.services-intro h2{font-size:clamp(30px,4.1vw,55px);margin:15px 0 0;line-height:1.10;font-weight:900;letter-spacing:-.06em;color:#142723}
.services-intro h2 em{font-style:normal;color:var(--sg)}
.services-intro__aside{padding-bottom:8px}.services-big-six{font-size:clamp(70px,8vw,120px);font-weight:900;letter-spacing:-.09em;line-height:.95;color:var(--sg);display:block}.services-big-six span{font-size:12px;letter-spacing:.1em;font-weight:800;vertical-align:middle}
.services-intro__aside p{font-size:13px;line-height:1.7;color:var(--st);margin:16px 0 0}
.services-rail{width:min(1220px,calc(100% - 84px));height:3px;background:#dce8e4;margin:0 auto 26px;overflow:hidden}.services-rail__fill{height:100%;width:0;background:var(--sg);transition:width .32s}
.service-entry{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,3.5vw,56px);min-height:0;align-items:center;padding:14px 0 34px;position:relative;border-bottom:1px solid #dfe9e4;margin-bottom:30px}
.service-entry:last-child{margin-bottom:0;padding-bottom:16px;border-bottom:0}
.service-entry--reverse{grid-template-columns:.95fr 1.05fr}.service-entry--reverse .service-visual{grid-column:2;grid-row:1}.service-entry--reverse .service-copy{grid-column:1;grid-row:1}
.service-visual{position:relative;aspect-ratio:1.68;min-width:0;padding:13px;background:linear-gradient(135deg,#edf2ef,#fff 45%,#e5ece8);border:1px solid rgba(47,79,79,.17);box-shadow:0 20px 54px rgba(15,49,40,.10)}
.service-visual__frame{position:relative;overflow:hidden;width:100%;height:100%;background:#dce7df;clip-path:polygon(0 0,97% 0,100% 4%,100% 100%,4% 100%,0 96%)}
.service-visual__frame img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.76) contrast(1.05);transform:scale(1.035);transition:transform 1.25s cubic-bezier(.16,1,.3,1),filter .75s}
.service-entry:hover .service-visual__frame img{transform:scale(1.12);filter:saturate(1.04) contrast(1.06)}
.service-visual__shade{position:absolute;inset:0;background:linear-gradient(30deg,rgba(12,38,32,.38),transparent 40%);pointer-events:none}
.service-visual__edge{position:absolute;width:66px;height:66px;border-color:var(--sg);border-style:solid;border-width:0;pointer-events:none;transition:width .6s,height .6s}
.service-visual__edge.tl{left:-2px;top:-2px;border-left-width:3px;border-top-width:3px}.service-visual__edge.br{right:-2px;bottom:-2px;border-right-width:3px;border-bottom-width:3px}
.service-entry:hover .service-visual__edge{width:110px;height:110px}
.service-visual__stamp{position:absolute;left:25px;bottom:26px;z-index:3;font-size:10px;font-weight:900;letter-spacing:.19em;color:#fff;text-shadow:0 1px 6px #172b27}.service-visual__stamp i{font-style:normal;opacity:.6}
.service-copy{position:relative;isolation:isolate;padding:15px 0}
.service-copy__eyebrow{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.23em;color:#648579;font-weight:900;line-height:1.6}
.service-copy__line{height:1px;width:34px;flex:none;background:#a9c5bb}
.service-copy__num{position:absolute;top:-8px;right:0;font-weight:900;color:rgba(47,79,79,.06);font-size:clamp(130px,17vw,230px);letter-spacing:-.09em;line-height:1;z-index:-1;pointer-events:none;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.service-entry:hover .service-copy__num{transform:translateY(-12px)}
.service-copy h3{font-weight:900;font-size:clamp(28px,2.85vw,40px);line-height:1.04;letter-spacing:-.06em;color:var(--sd);margin:20px 0 9px;max-width:600px;text-wrap:balance}
.service-copy__subtitle{display:block;color:var(--sg);font-size:clamp(16px,1.6vw,22px);letter-spacing:-.03em;margin:0 0 14px;font-weight:700}
.service-copy p{max-width:550px;margin:0;color:#526762;line-height:1.67;font-size:clamp(15px,1.1vw,17px)}
.service-copy__footer{margin-top:18px;padding-top:12px;border-top:1px solid rgba(47,79,79,.21);display:flex;align-items:center;gap:12px;color:#799187;font-size:9px;letter-spacing:.21em;font-weight:900}
.service-copy__footer>span:last-child{margin-left:auto;color:var(--sg)}.service-copy__diamond{width:8px;height:8px;border:1px solid var(--sg);transform:rotate(45deg);animation:serviceDiamond 5s ease-in-out infinite}
.services-closing{position:relative;overflow:hidden;background:var(--sg);color:#fff;padding:72px 0 68px;isolation:isolate}
.services-closing__blueprint{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 8%,#000 95%);animation:serviceGrid 20s linear infinite}
.services-closing__kicker{font-weight:900;font-size:10px;letter-spacing:.37em;color:#b7d5ca}
.services-closing h2{font-size:clamp(30px,4.1vw,55px);line-height:1.13;letter-spacing:-.06em;margin:24px 0 40px;font-weight:900}
.services-closing h2 span{color:transparent;-webkit-text-stroke:1.3px rgba(230,247,239,.85)}
.services-closing__bottom{border-top:1px solid rgba(255,255,255,.32);padding-top:25px;display:flex;justify-content:space-between;gap:32px;align-items:center}
.services-closing__bottom p{margin:0;color:#dcebe4;font-size:17px;line-height:1.6}
.services-closing__bottom a{white-space:nowrap;display:flex;align-items:center;gap:21px;border-bottom:1px solid #d3eae0;font-size:11px;font-weight:900;letter-spacing:.15em;padding:9px 0;transition:gap .25s}.services-closing__bottom a:hover{gap:32px}.services-closing__bottom a span{font-size:24px;font-weight:400}
/* Intersection reveal: visible without JS, fluid when available. */
.services-page.services-motion-ready .services-reveal{opacity:0;transform:translateY(46px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.services-page.services-motion-ready .service-entry:nth-child(odd).services-reveal{transform:translateX(-70px)}
.services-page.services-motion-ready .service-entry:nth-child(even).services-reveal{transform:translateX(70px)}
.services-page.services-motion-ready .services-reveal.is-visible{opacity:1;transform:translate(0,0)}
.services-page.services-motion-ready .service-entry.is-visible .service-copy__num{animation:servicesCountRise 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes serviceGrid{to{background-position:72px 72px,72px 72px}}
@keyframes serviceDiamond{0%,100%{opacity:.3;scale:.7}50%{opacity:1;scale:1.2}}
@keyframes servicesCountRise{from{opacity:0;transform:translateY(40px) scale(.84)}to{opacity:1;transform:none}}
@media(max-width:1020px){.services-wrap,.services-hero__inner,.services-rail{width:calc(100% - 56px)}.services-hero h2{font-size:clamp(62px,8.8vw,94px)}.service-entry{gap:28px}.service-copy h3{font-size:clamp(27px,3.2vw,38px)}.service-visual{aspect-ratio:1.5}}
@media(max-width:760px){.services-wrap,.services-hero__inner,.services-rail{width:calc(100% - 36px)}.services-hero{min-height:590px}.services-hero__image{background:linear-gradient(90deg,rgba(10,33,30,.97),rgba(10,33,30,.54)),url('../assets/servicios-architectural-hero.webp') 53% center / cover no-repeat}.services-hero__inner{padding:88px 0}.services-hero h2{font-size:clamp(53px,11vw,79px);margin:41px 0 60px}.services-hero__bottom{flex-direction:column;align-items:flex-start}.services-hero__bottom p{font-size:15px}.services-list{padding:48px 0 60px}.services-intro{grid-template-columns:1fr;gap:20px;margin-bottom:30px}.services-intro__aside{display:flex;align-items:center;gap:28px}.services-intro__aside p{margin:0;max-width:230px}.services-big-six{font-size:80px;white-space:nowrap}.services-rail{margin-bottom:22px}.service-entry,.service-entry--reverse{grid-template-columns:1fr;gap:14px;padding:0 0 34px;margin-bottom:34px}.service-entry--reverse .service-visual,.service-entry--reverse .service-copy{grid-column:1;grid-row:auto}.service-entry--reverse .service-visual{grid-row:1}.service-entry--reverse .service-copy{grid-row:2}.service-visual{aspect-ratio:1.54}.service-copy{padding:9px 0 2px}.service-copy__num{font-size:108px;top:0}.service-copy h3{font-size:clamp(27px,6.3vw,36px);margin:17px 0 9px}.service-copy p{font-size:15px}.services-closing{padding:50px 0}.services-closing h2{font-size:clamp(30px,6.9vw,44px)}.services-closing__bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:440px){.services-hero__eyebrow{font-size:8px;letter-spacing:.18em}.services-hero h2{font-size:clamp(44px,11.6vw,61px)}.services-intro h2{font-size:clamp(29px,7.3vw,39px)}.services-intro__aside{align-items:flex-start}.services-big-six{font-size:66px}.services-hero__bottom a{font-size:10px}.service-copy__eyebrow{font-size:8px;letter-spacing:.14em}.service-copy__line{width:20px}.service-copy h3{font-size:30px}.services-closing h2{font-size:clamp(29px,7.6vw,37px)}.services-closing__bottom p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.services-page *, .services-page *::before,.services-page *::after{animation:none!important;transition:none!important}.services-page.services-motion-ready .services-reveal{opacity:1!important;transform:none!important}}


/* OSM v0.10.9: winning specificity for the COMPLETED reveal state.
   Previously nth-child left/right translateX was more specific than is-visible,
   so images/text stayed shifted off-screen, especially on iPhone. */
.services-page.services-motion-ready .service-entry:nth-child(odd).services-reveal.is-visible,
.services-page.services-motion-ready .service-entry:nth-child(even).services-reveal.is-visible {
  opacity:1;
  transform:translate3d(0,0,0);
}
/* Mobile: remove horizontal entrance displacements and prioritize legibility.
   Contain photographs instead of cropping them in tight portrait viewports. */
@media(max-width:760px){
  .services-page .services-wrap,.services-page .services-rail{max-width:calc(100% - 36px);}
  .services-page .services-intro,.services-page .service-entry,
  .services-page .service-visual,.services-page .service-copy{min-width:0;max-width:100%;}
  .services-page.services-motion-ready .service-entry:nth-child(odd).services-reveal,
  .services-page.services-motion-ready .service-entry:nth-child(even).services-reveal{
    transform:translateY(22px);
  }
  .services-page.services-motion-ready .service-entry:nth-child(odd).services-reveal.is-visible,
  .services-page.services-motion-ready .service-entry:nth-child(even).services-reveal.is-visible{
    transform:none;
  }
  .services-page .service-visual{aspect-ratio:1.45;}
  .services-page .service-visual__frame{background:#e8efeb;}
  .services-page .service-visual__frame img,
  .services-page .service-entry:hover .service-visual__frame img{
    object-fit:contain;
    object-position:center;
    transform:none;
  }
  .services-page .service-copy h3,
  .services-page .service-copy p,
  .services-page .service-copy__subtitle,
  .services-page .services-intro h2 {max-width:100%; overflow-wrap:break-word;}
  .services-page .service-copy__footer{flex-wrap:wrap;}
  .services-page .service-copy__footer>span:last-child{margin-left:0;}
}
@media(max-width:440px){
  .services-page .service-copy h3{font-size:clamp(24px,7vw,30px);}
  .services-page .services-intro__aside{gap:14px;}
  .services-page .services-big-six{font-size:clamp(52px,16vw,66px);}
  .services-page .services-intro__aside p{min-width:0;}
}