/* OSM Website v0.2 — unified homepage components.
   Each section is semantic HTML directly in index.html; no GoDaddy blocks.
   Original visual language retained, repetitive experimental CSS removed. */

/* ================== ARCHITECTURE IMAGE & VIDEO ================== */
:is(#osm-architecture-photo,#osm-project-video){
  --main:#2f4f4f;--line:rgba(47,79,79,.22);
  position:relative;isolation:isolate;overflow:hidden;background:#fff;
  font-family:Arial,Helvetica,sans-serif;color:#101515;
}
:is(#osm-architecture-photo,#osm-project-video) .wrap{
  position:relative;z-index:1;width:min(1180px,calc(100% - 28px));
  margin:0 auto;padding:34px 0;
}
:is(#osm-architecture-photo,#osm-project-video) .build-bg{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
:is(#osm-architecture-photo,#osm-project-video) .column{
  position:absolute;bottom:0;width:18px;height:0;background:rgba(47,79,79,.055);
  border-left:1px solid rgba(47,79,79,.15);border-right:1px solid rgba(47,79,79,.10);
  animation:osmColumnBuild 8s ease-in-out infinite;
}
:is(#osm-architecture-photo,#osm-project-video) .c1{left:4%;--h:72%;animation-delay:0s}
:is(#osm-architecture-photo,#osm-project-video) .c2{left:13%;--h:48%;animation-delay:.8s}
:is(#osm-architecture-photo,#osm-project-video) .c3{right:13%;--h:62%;animation-delay:1.6s}
:is(#osm-architecture-photo,#osm-project-video) .c4{right:4%;--h:42%;animation-delay:2.4s}
:is(#osm-architecture-photo,#osm-project-video) .slab{
  position:absolute;height:16px;width:140px;background:rgba(47,79,79,.07);
  border:1px solid rgba(47,79,79,.14);opacity:0;
  animation:osmSlabSet 8s cubic-bezier(.16,1,.3,1) infinite;
}
:is(#osm-architecture-photo,#osm-project-video) .s1{left:1%;top:18%;animation-delay:.5s}
:is(#osm-architecture-photo,#osm-project-video) .s2{right:1%;top:30%;animation-delay:1.4s}
:is(#osm-architecture-photo,#osm-project-video) .s3{left:6%;bottom:16%;animation-delay:2.2s}
:is(#osm-architecture-photo,#osm-project-video) .s4{right:5%;bottom:12%;animation-delay:3s}
:is(#osm-architecture-photo,#osm-project-video) .node{
  position:absolute;width:10px;height:10px;border-radius:50%;background:var(--main);
  box-shadow:0 0 0 8px rgba(47,79,79,.06);opacity:.25;
  animation:osmNodePulse 4.2s ease-in-out infinite;
}
:is(#osm-architecture-photo,#osm-project-video) .n1{left:6%;top:35%}
:is(#osm-architecture-photo,#osm-project-video) .n2{right:7%;top:18%;animation-delay:1s}
:is(#osm-architecture-photo,#osm-project-video) .n3{left:11%;bottom:18%;animation-delay:2s}
:is(#osm-architecture-photo,#osm-project-video) .n4{right:10%;bottom:30%;animation-delay:3s}
:is(#osm-architecture-photo,#osm-project-video) .stage{
  position:relative;isolation:isolate;z-index:2;width:100%;
  padding:clamp(22px,2.5vw,34px) clamp(22px,3vw,42px);
  background:linear-gradient(145deg,rgba(47,79,79,.035),rgba(255,255,255,.94) 45%,rgba(47,79,79,.025));
  border:1px solid rgba(47,79,79,.14);box-shadow:0 22px 60px rgba(47,79,79,.06);
  overflow:hidden;
}
:is(#osm-architecture-photo,#osm-project-video) .stage::before,
:is(#osm-architecture-photo,#osm-project-video) .stage::after{
  content:"";position:absolute;z-index:4;width:70px;height:70px;pointer-events:none;
}
:is(#osm-architecture-photo,#osm-project-video) .stage::before{
  left:0;top:0;border-left:3px solid var(--main);border-top:3px solid var(--main);
  animation:osmCornerBuildA 5s ease-in-out infinite;
}
:is(#osm-architecture-photo,#osm-project-video) .stage::after{
  right:0;bottom:0;border-right:3px solid var(--main);border-bottom:3px solid var(--main);
  animation:osmCornerBuildB 5s ease-in-out infinite;
}
:is(#osm-architecture-photo,#osm-project-video) .image-frame{
  position:relative;width:100%;aspect-ratio:16/8.3;overflow:hidden;background:#eef2f2;
  clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%);
}
#osm-architecture-photo .image-frame img{
  display:block;width:106%;height:106%;max-width:none;object-fit:cover;object-position:center;
  filter:saturate(.82) contrast(1.03);animation:osmImageMove 18s ease-in-out infinite alternate;
}
:is(#osm-architecture-photo,#osm-project-video) .image-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(47,79,79,.11),transparent 45%,rgba(47,79,79,.05));
  pointer-events:none;
}
#osm-project-video .video-frame iframe{
  display:block;position:absolute;inset:0;width:100%;height:100%;border:0;
}
:is(#osm-architecture-photo,#osm-project-video) .rail{
  position:absolute;z-index:5;background:var(--main);opacity:.5;
}
:is(#osm-architecture-photo,#osm-project-video) .rail.top{left:0;top:12px;width:0;height:2px;animation:osmRailTop 6s ease-in-out infinite}
:is(#osm-architecture-photo,#osm-project-video) .rail.right{right:12px;top:0;width:2px;height:0;animation:osmRailRight 6s ease-in-out infinite .7s}
:is(#osm-architecture-photo,#osm-project-video) .rail.bottom{right:0;bottom:12px;width:0;height:2px;animation:osmRailBottom 6s ease-in-out infinite 1.4s}
:is(#osm-architecture-photo,#osm-project-video) .rail.left{left:12px;bottom:0;width:2px;height:0;animation:osmRailLeft 6s ease-in-out infinite 2.1s}
@keyframes osmColumnBuild{0%,14%{height:0;opacity:0}44%,78%{height:var(--h,65%);opacity:1}100%{height:var(--h,65%);opacity:.25}}
@keyframes osmSlabSet{0%,15%{opacity:0;transform:translateY(28px) scaleX(.78)}40%,76%{opacity:.85;transform:translateY(0) scaleX(1)}100%{opacity:.22;transform:scaleX(.95)}}
@keyframes osmNodePulse{0%,100%{opacity:.18;transform:scale(.75)}50%{opacity:.75;transform:scale(1.15)}}
@keyframes osmCornerBuildA{0%,100%{width:30px;height:30px;opacity:.35}50%{width:78px;height:78px;opacity:1}}
@keyframes osmCornerBuildB{0%,100%{width:34px;height:34px;opacity:.35}50%{width:86px;height:86px;opacity:1}}
@keyframes osmImageMove{0%{transform:translate(-4%,-3%) scale(1.04)}50%{transform:translate(-1%,-5%) scale(1.08)}100%{transform:translate(-5%,-1%) scale(1.06)}}
@keyframes osmRailTop{0%,15%{width:0;opacity:0}46%,70%{width:34%;opacity:.55}100%{width:10%;opacity:.12}}
@keyframes osmRailRight{0%,15%{height:0;opacity:0}46%,70%{height:36%;opacity:.55}100%{height:10%;opacity:.12}}
@keyframes osmRailBottom{0%,15%{width:0;opacity:0}46%,70%{width:30%;opacity:.55}100%{width:8%;opacity:.12}}
@keyframes osmRailLeft{0%,15%{height:0;opacity:0}46%,70%{height:32%;opacity:.55}100%{height:8%;opacity:.12}}

/* ================== HISTORY / TIMELINE ================== */
#osm-timeline{
  --main:#2f4f4f;--ink:#111717;--muted:#566363;--line:rgba(47,79,79,.16);
  position:relative;width:100%;overflow:hidden;background:#fff;color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}
#osm-timeline .wrap{position:relative;z-index:2;width:min(1180px,calc(100% - 42px));margin:auto;padding:clamp(48px,5vw,82px) 0 40px}
#osm-timeline .eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  color:var(--main);font-size:10px;font-weight:800;letter-spacing:5px;text-transform:uppercase;
}
#osm-timeline .eyebrow::before{content:"";width:46px;height:2px;background:var(--main)}
#osm-timeline .title-wrap{position:relative;isolation:isolate;min-height:136px;margin-bottom:28px;padding-bottom:14px}
#osm-timeline .title-wrap::after{content:"";position:absolute;left:0;bottom:0;width:12%;height:3px;background:var(--main)}
#osm-timeline h2{
  margin:0;max-width:1080px;font-size:clamp(40px,5.15vw,70px);line-height:.96;
  letter-spacing:-.065em;text-transform:uppercase;font-weight:900;
}
#osm-timeline h2 .title-word{display:inline-block;animation:osmTitleRise 1.5s cubic-bezier(.16,1,.3,1) both}
#osm-timeline h2 .title-word:nth-child(2){animation-delay:.26s}
#osm-timeline h2 .title-word:first-child{color:var(--main)}
#osm-timeline h2 .title-word.outline{
  display:block;margin-top:10px;color:transparent;-webkit-text-stroke:1.4px var(--main);
}
@keyframes osmTitleRise{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
#osm-timeline .header-mass{
  position:absolute;z-index:-1;right:1%;top:50%;width:min(38%,390px);height:82%;
  transform:translateY(-50%);pointer-events:none;opacity:.42;
}
#osm-timeline .header-mass .block{
  position:absolute;border-radius:4px;background:linear-gradient(145deg,rgba(47,79,79,.22),rgba(47,79,79,.08));
  box-shadow:0 14px 30px rgba(47,79,79,.05),inset 0 0 0 1px rgba(47,79,79,.14);
  opacity:0;transform:translateY(40px) scale(.92);animation:osmMassBuild 7s cubic-bezier(.16,1,.3,1) infinite;
}
#osm-timeline .header-mass .b1{width:44%;height:34%;right:3%;bottom:7%}
#osm-timeline .header-mass .b2{width:34%;height:42%;right:39%;bottom:16%;animation-delay:.65s}
#osm-timeline .header-mass .b3{width:28%;height:26%;right:15%;bottom:49%;animation-delay:1.3s}
#osm-timeline .header-mass .b4{width:20%;height:18%;right:53%;bottom:61%;animation-delay:1.95s}
#osm-timeline .header-mass .core{
  position:absolute;right:22%;top:17%;width:84px;height:84px;border-radius:18px;
  background:var(--main);opacity:0;transform:scale(.65) rotate(-8deg);
  box-shadow:0 18px 40px rgba(47,79,79,.16);
  animation:osmCoreSet 7s cubic-bezier(.16,1,.3,1) infinite 1.2s;
}
#osm-timeline .header-mass .shadow{
  position:absolute;right:3%;bottom:0;width:78%;height:24%;border-radius:50%;
  background:rgba(47,79,79,.10);filter:blur(18px);opacity:.3;
  animation:osmShadowBreathe 4.8s ease-in-out infinite;
}
@keyframes osmMassBuild{0%,12%{opacity:0;transform:translateY(40px) scale(.92)}38%,78%{opacity:1;transform:none}100%{opacity:.38;transform:none}}
@keyframes osmCoreSet{0%,14%{opacity:0;transform:scale(.65) rotate(-8deg)}42%,78%{opacity:.95;transform:none}100%{opacity:.45;transform:scale(.96)}}
@keyframes osmShadowBreathe{0%,100%{transform:scaleX(.84);opacity:.18}50%{transform:scaleX(1.05);opacity:.42}}
#osm-timeline .timeline{position:relative;padding:4px 0}
#osm-timeline .timeline::before{
  content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,rgba(47,79,79,.06),rgba(47,79,79,.46) 10% 90%,rgba(47,79,79,.06));
}
#osm-timeline .item{position:relative;display:block;min-height:0;padding-left:52px}
#osm-timeline .item+.item{margin-top:10px}
#osm-timeline .node{
  position:absolute;left:9px;top:50%;z-index:3;width:18px;height:18px;
  border:2px solid var(--main);border-radius:50%;background:var(--main);
  transform:translateY(-50%);box-shadow:0 0 0 8px rgba(47,79,79,.08);
  animation:osmTimelineNode 3.8s ease-in-out infinite;
}
#osm-timeline .panel{
  position:relative;padding:24px 28px;border:1px solid var(--line);
  background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(47,79,79,.04);
  animation:osmCardSlide 1s cubic-bezier(.16,1,.3,1) both;
  transition:border-color .3s,background .3s;
}
#osm-timeline .item:nth-child(2) .panel{animation-delay:.12s}
#osm-timeline .item:nth-child(3) .panel{animation-delay:.24s}
#osm-timeline .item:nth-child(4) .panel{animation-delay:.36s}
#osm-timeline .panel::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--main)}
#osm-timeline .panel:hover{border-color:rgba(47,79,79,.38);background:rgba(47,79,79,.025)}
#osm-timeline .tag{
  display:inline-block;margin-bottom:13px;color:var(--main);font-size:clamp(15px,1.7vw,22px);
  font-weight:900;letter-spacing:3.5px;text-transform:uppercase;
}
#osm-timeline p{margin:0;color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.62}
#osm-timeline strong{color:var(--ink);font-weight:700}
@keyframes osmTimelineNode{0%,100%{background:#fff;box-shadow:0 0 0 6px rgba(47,79,79,.03);opacity:.55}50%{background:var(--main);box-shadow:0 0 0 10px rgba(47,79,79,.08),0 0 22px rgba(47,79,79,.22);opacity:1}}
@keyframes osmCardSlide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* ================== MISSION AND VISION ================== */
#osm-purpose{
  --main:#2f4f4f;--ink:#101515;--muted:#586565;--line:rgba(47,79,79,.16);
  position:relative;width:100%;overflow:hidden;background:#fff;color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}
#osm-purpose .wrap{width:min(1180px,calc(100% - 42px));margin:auto;padding:38px 0 56px}
#osm-purpose .purpose-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#osm-purpose .panel{
  position:relative;min-height:520px;overflow:hidden;background:#f7f9f9;
  border:2px solid rgba(47,79,79,.18);box-shadow:0 16px 38px rgba(47,79,79,.055);
}
#osm-purpose .image{position:absolute;inset:0}
#osm-purpose .image img{
  position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;
  object-position:center;filter:saturate(1) contrast(1.02);
  animation:osmPurposePhoto 16s ease-in-out infinite alternate;
  transition:filter .8s;
}
#osm-purpose .vision .image img{animation-duration:18s;animation-direction:alternate-reverse}
#osm-purpose .panel:hover img{filter:saturate(1.07) contrast(1.02)}
#osm-purpose .shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,255,255,.99) 0 32%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.48) 62%,rgba(255,255,255,.05) 100%);
}
#osm-purpose .content{
  position:absolute;z-index:3;left:34px;right:34px;bottom:32px;
  min-height:220px;display:flex;flex-direction:column;justify-content:flex-start;
}
#osm-purpose h3{
  color:var(--main);margin:0 0 16px;font-size:clamp(30px,3.4vw,46px);
  line-height:1;letter-spacing:1px;text-transform:uppercase;font-weight:900;
}
#osm-purpose p{margin:0;color:#465454;font-size:clamp(15px,1.15vw,17px);line-height:1.62}
#osm-purpose .edge-build{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;filter:drop-shadow(0 2px 2px rgba(47,79,79,.06))}
#osm-purpose .edge-build .edge-h{
  position:absolute;height:6px;width:28%;opacity:0;
  background:repeating-linear-gradient(90deg,#2f4f4f 0 10px,#3e5e5e 10px 15px,#264343 15px 23px,#567070 23px 27px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(25,48,48,.16) inset,0 2px 7px rgba(47,79,79,.12);
}
#osm-purpose .edge-build .top-a{top:0;left:0;animation:osmEdgeH 6.4s cubic-bezier(.16,1,.3,1) infinite}
#osm-purpose .edge-build .top-b{top:0;right:0;animation:osmEdgeH 6.4s cubic-bezier(.16,1,.3,1) infinite .7s}
#osm-purpose .edge-build .bottom-a{bottom:0;left:0;animation:osmEdgeH 6.4s cubic-bezier(.16,1,.3,1) infinite 1.4s}
#osm-purpose .edge-build .bottom-b{bottom:0;right:0;animation:osmEdgeH 6.4s cubic-bezier(.16,1,.3,1) infinite 2.1s}
#osm-purpose .edge-build .edge-v{
  position:absolute;width:6px;height:24%;opacity:0;
  background:repeating-linear-gradient(to bottom,#2f4f4f 0 9px,#4a6868 9px 14px,#234040 14px 21px,#5b7474 21px 25px);
  box-shadow:1px 0 0 rgba(255,255,255,.28) inset,2px 0 7px rgba(47,79,79,.11);
}
#osm-purpose .edge-build .left-a{left:0;top:12%;animation:osmEdgeV 6.4s ease-in-out infinite .35s}
#osm-purpose .edge-build .right-a{right:0;bottom:12%;animation:osmEdgeV 6.4s ease-in-out infinite 1.75s}
#osm-purpose .edge-build .edge-node{position:absolute;width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:var(--main);opacity:0;box-shadow:0 0 0 3px rgba(47,79,79,.18),0 3px 9px rgba(25,48,48,.18);animation:osmEdgeNode 6.4s ease-in-out infinite}
#osm-purpose .edge-build .node-a{left:-3px;top:30%;animation-delay:.5s}
#osm-purpose .edge-build .node-b{right:-3px;bottom:28%;animation-delay:2s}
#osm-purpose .vision .edge-h,#osm-purpose .vision .edge-v,#osm-purpose .vision .edge-node{animation-delay:-2s}
@keyframes osmPurposePhoto{0%{object-position:45% center}50%{object-position:55% center}100%{object-position:48% center}}
@keyframes osmEdgeH{0%,12%{width:0;opacity:0}34%,62%{width:30%;opacity:1}82%,100%{width:8%;opacity:.1}}
@keyframes osmEdgeV{0%,15%{height:0;opacity:0}38%,64%{height:26%;opacity:.9}84%,100%{height:7%;opacity:.1}}
@keyframes osmEdgeNode{0%,18%,100%{opacity:0;transform:scale(.55)}38%,64%{opacity:.9;transform:scale(1)}82%{opacity:.18;transform:scale(.72)}}

/* ================== PROJECTS HEADING ================== */
#osm-projects-section{
  --main:#2f4f4f;position:relative;width:100%;margin:0;
  padding:18px clamp(20px,4vw,60px) 0;background:#fff;
  font-family:Arial,Helvetica,sans-serif;text-align:center;
}
#osm-projects-section .eyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 0 clamp(18px,2vw,26px);
  font:700 clamp(10px,.85vw,13px) 'Courier New',monospace;
  letter-spacing:.45em;text-transform:uppercase;color:var(--main);
  animation:osmLabelFade 4.6s ease-in-out infinite;
}
#osm-projects-section .eyebrow::before,#osm-projects-section .eyebrow::after{
  content:"";width:50px;height:2px;flex:none;background:var(--main);
  animation:osmLabelBarFade 4.6s ease-in-out infinite;
}
#osm-projects-section .title{
  position:relative;z-index:2;margin:0 auto;padding:0;
  text-align:center;text-transform:uppercase;font-weight:700;
  line-height:.84;letter-spacing:-.055em;
}
#osm-projects-section .title .solid,#osm-projects-section .title .outline{
  display:block;width:100%;font-size:clamp(43px,5.3vw,78px);
  font-weight:700;white-space:nowrap;
}
#osm-projects-section .title .solid{
  color:transparent;background:linear-gradient(to bottom,#2f4f4f 0 34%,#6f8b8b 49%,#2f4f4f 64% 100%);
  background-size:100% 220%;background-position:0 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:osmSolidVerticalLight 6.8s ease-in-out infinite;
}
#osm-projects-section .title .outline{
  margin-top:.06em;color:transparent;-webkit-text-stroke:1.5px var(--main);
  background:linear-gradient(to top,rgba(47,79,79,.95) 0 34%,rgba(47,79,79,.18) 55%,transparent 72%);
  background-size:100% 240%;background-position:0 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:osmOutlineFillRise 7.6s ease-in-out infinite;
}
#osm-projects-section .project-trace{position:relative;width:min(620px,76vw);height:28px;margin:clamp(18px,2vw,26px) auto 0;overflow:hidden}
#osm-projects-section .trace-left,#osm-projects-section .trace-right{
  position:absolute;top:50%;width:47%;height:2px;transform:translateY(-50%) scaleX(0);
  animation:osmTraceBuild 4.8s cubic-bezier(.16,1,.3,1) infinite;
}
#osm-projects-section .trace-left{left:0;transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(47,79,79,.22),var(--main))}
#osm-projects-section .trace-right{right:0;transform-origin:left center;background:linear-gradient(90deg,var(--main),rgba(47,79,79,.22),transparent)}
#osm-projects-section .trace-core{
  position:absolute;left:50%;top:50%;width:12px;height:12px;border:2px solid var(--main);
  background:#fff;transform:translate(-50%,-50%) rotate(45deg) scale(0);opacity:0;
  animation:osmTraceCore 4.8s ease-in-out infinite;
}
#osm-projects-section .project-trace::before,#osm-projects-section .project-trace::after{
  content:"";position:absolute;z-index:3;top:50%;width:6px;height:6px;border-radius:50%;background:var(--main);opacity:0;
  box-shadow:0 0 12px rgba(47,79,79,.38);animation:osmDotPass 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
#osm-projects-section .project-trace::before{left:0;--dir:1}
#osm-projects-section .project-trace::after{right:0;--dir:-1;animation-name:osmDotPassReverse}
@keyframes osmSolidVerticalLight{0%,100%{background-position:0 100%}50%{background-position:0 0}}
@keyframes osmOutlineFillRise{0%,100%{background-position:0 100%}48%,58%{background-position:0 18%}}
@keyframes osmLabelFade{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes osmLabelBarFade{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes osmTraceBuild{0%,12%{transform:translateY(-50%) scaleX(0);opacity:0}42%,67%{transform:translateY(-50%) scaleX(1);opacity:1}84%,100%{transform:translateY(-50%) scaleX(.1);opacity:.12}}
@keyframes osmTraceCore{0%,30%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.55)}46%,68%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(135deg) scale(.55)}}
@keyframes osmDotPass{0%,14%{left:0;opacity:0}22%{opacity:1}50%{left:46%;opacity:1}66%{left:72%;opacity:.8}84%,100%{left:100%;opacity:0}}
@keyframes osmDotPassReverse{0%,14%{right:0;opacity:0}22%{opacity:1}50%{right:46%;opacity:1}66%{right:72%;opacity:.8}84%,100%{right:100%;opacity:0}}

/* ================== RESPONSIVE + MOTION SAFETY ================== */
@media(max-width:760px){
  #osm-timeline .wrap{width:calc(100% - 26px);padding:45px 0 25px}
  #osm-timeline h2{font-size:clamp(35px,9vw,52px);letter-spacing:-.055em}
  #osm-timeline h2 .title-word.outline{margin-top:7px}
  #osm-timeline .title-wrap{min-height:112px;margin-bottom:22px}
  #osm-timeline .header-mass{width:44%;right:-5%;opacity:.28}
  #osm-timeline .timeline::before{left:14px}
  #osm-timeline .item{padding-left:42px;margin:0 0 16px}
  #osm-timeline .item+.item{margin-top:0}
  #osm-timeline .node{left:5px}
  #osm-timeline .panel{padding:22px 20px}
  #osm-timeline .tag{font-size:15px;letter-spacing:2.7px}
  #osm-timeline p{font-size:15px;line-height:1.6}
  #osm-purpose .wrap{width:calc(100% - 26px);padding:28px 0 38px}
  #osm-purpose .purpose-grid{grid-template-columns:1fr;gap:18px}
  #osm-purpose .panel{min-height:500px}
  #osm-purpose .content{min-height:0;left:26px;right:26px;bottom:28px}
  #osm-projects-section{padding:18px 18px 0}
  #osm-projects-section .title .solid,#osm-projects-section .title .outline{font-size:clamp(40px,11.7vw,60px);letter-spacing:-.045em}
  #osm-projects-section .eyebrow{gap:11px;letter-spacing:.3em}
  #osm-projects-section .eyebrow::before,#osm-projects-section .eyebrow::after{width:30px}
}
@media(max-width:700px){
  :is(#osm-architecture-photo,#osm-project-video) .wrap{width:calc(100% - 18px);padding:20px 0}
  :is(#osm-architecture-photo,#osm-project-video) .stage{padding:16px}
  #osm-architecture-photo .image-frame{aspect-ratio:4/5}
  #osm-project-video .image-frame{aspect-ratio:16/9}
  :is(#osm-architecture-photo,#osm-project-video) .slab{width:80px;height:11px}
  :is(#osm-architecture-photo,#osm-project-video) .column{width:12px}
  :is(#osm-architecture-photo,#osm-project-video) .stage::before,
  :is(#osm-architecture-photo,#osm-project-video) .stage::after{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  #osm-timeline *,#osm-timeline *::before,#osm-timeline *::after,
  #osm-purpose *,#osm-purpose *::before,#osm-purpose *::after,
  #osm-projects-section *,#osm-projects-section *::before,#osm-projects-section *::after,
  #osm-architecture-photo *,#osm-architecture-photo *::before,#osm-architecture-photo *::after,
  #osm-project-video *,#osm-project-video *::before,#osm-project-video *::after{
    animation:none!important;transition:none!important;
  }
}

/* v0.10.6: Enlace público al video de YouTube, sin alterar su reproductor. */
#osm-project-video .osm-video-external {text-align:right;margin-top:14px}
#osm-project-video .osm-video-external a{font:800 10px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#2f4f4f;border-bottom:1px solid #96aea5;padding-bottom:5px}
#osm-project-video .osm-video-external a:hover{color:#698f82}


/* OSM v0.10.7 — estado local seguro del video (file://). No se incrusta YouTube sin Referer. */
#osm-project-video .osm-video-preview{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:#eaf5ef;background:
  radial-gradient(circle at 73% 43%,rgba(113,155,140,.2),transparent 33%),
  linear-gradient(135deg,#0a1919 0%,#1b3532 55%,#2f4f4f 100%);
}
#osm-project-video .osm-video-preview:before{
  content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(184,225,206,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(184,225,206,.1) 1px,transparent 1px);
  background-size:52px 52px;transform:rotate(-8deg) scale(1.1);
}
#osm-project-video .osm-video-preview:after{
  content:"";pointer-events:none;position:absolute;inset:12%;border:1px solid rgba(209,237,227,.13);
}
#osm-project-video .osm-video-preview__content{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(9px,1.9vw,22px);padding:22px;text-align:center;max-width:700px;
}
#osm-project-video .osm-video-preview__kicker{
  font-size:clamp(8px,1vw,12px);font-weight:800;letter-spacing:.34em;color:#b7dcd0;margin:0;
}
#osm-project-video .osm-video-preview__title{
  font-size:clamp(20px,3.35vw,51px);line-height:1.08;letter-spacing:-.055em;margin:0;font-weight:800;
}
#osm-project-video .osm-video-preview__play{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  min-height:52px;padding:12px 23px;border:1px solid rgba(214,240,229,.58);
  background:#f2f8f5;color:#223e34;text-decoration:none;font-size:clamp(10px,1vw,13px);
  letter-spacing:.08em;font-weight:900;transition:transform .24s ease,background-color .24s ease;
}
#osm-project-video .osm-video-preview__play:hover{transform:translateY(-3px);background:#fff;}
#osm-project-video .osm-video-preview__play:focus-visible{outline:3px solid #b9e6d5;outline-offset:4px;}
#osm-project-video .osm-video-preview__play-icon{font-size:19px;line-height:1;}
#osm-project-video .osm-video-preview__note{
  margin:0;color:#c3d7d0;font-size:clamp(9px,1vw,12px);line-height:1.5;
}
#osm-project-video .video-frame.is-embedded .osm-video-preview{display:none;}
@media(max-width:560px){
 #osm-project-video .osm-video-preview__content{gap:10px;padding:12px;}
 #osm-project-video .osm-video-preview__play{min-height:40px;padding:8px 11px;}
 #osm-project-video .osm-video-preview__note{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){
 #osm-project-video .osm-video-preview__play{transition:none}
}

/* OSM v0.10.8 — video embebido en la pagina al servir localmente por HTTP/HTTPS. */
#osm-project-video .osm-video-preview__local-icon{
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:rgba(236,248,243,.12);border:1px solid rgba(207,237,221,.48);
  font-size:28px;color:#f0faf5;padding-left:5px;
}
#osm-project-video .osm-video-preview__note{
  max-width:490px;font-size:clamp(12px,1.1vw,14px);line-height:1.65;
}
#osm-project-video .osm-video-preview__note strong{color:#f7fff9;font-weight:800;}
#osm-project-video .video-frame.is-embedded iframe{z-index:2;}