/* HMA / V5 — Premium motion layer. No libraries, GPU-friendly transforms. */
:root {--hma-move:cubic-bezier(.2,.8,.2,1);--hma-blue:#699ec3;--hma-burgundy:#75160d}
/* Scroll position indicator — 0 layout impact. */
.hma-scroll-progress {position:fixed;top:0;left:0;width:100%;height:3px;z-index:100;pointer-events:none;background:linear-gradient(90deg,var(--hma-burgundy),var(--hma-blue) 55%,#d8e8f2);transform:scaleX(var(--hma-progress,0));transform-origin:left center;transition:transform .1s linear;box-shadow:0 0 14px #699ec355}
[dir=rtl] .hma-scroll-progress{transform-origin:right center}
/* Elegant entrance in hero, with meaningful stagger. */
@keyframes hma-arrive{from{opacity:0;transform:translate3d(0,30px,0);filter:blur(5px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes hma-soft-rise{0%{opacity:0;transform:translate3d(0,14px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hma-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hma-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24px,-19px,0) scale(1.10)}}
@keyframes hma-sheen{0%{transform:translateX(-160%) rotate(18deg)}100%{transform:translateX(325%) rotate(18deg)}}
@keyframes hma-line-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hma-pulse{0%,100%{box-shadow:0 0 0 0 #699ec34a}50%{box-shadow:0 0 0 8px #699ec300}}
@keyframes hma-letter-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html.motion-ready .hero .eyebrow,html.motion-ready .hero h1>span,html.motion-ready .hero .hero-desc,html.motion-ready .hero .hero-buttons,html.motion-ready .hero .hero-bottom{opacity:0;animation:hma-arrive .86s var(--hma-move) both}
html.motion-ready .hero .eyebrow{animation-delay:.08s}
html.motion-ready .hero h1>span:nth-child(1){animation-delay:.16s}
html.motion-ready .hero h1>span:nth-child(2){animation-delay:.24s}
html.motion-ready .hero h1>span:nth-child(3){animation-delay:.32s}
html.motion-ready .hero h1>span:nth-child(4){animation-delay:.40s}
html.motion-ready .hero .hero-desc{animation-delay:.53s}
html.motion-ready .hero .hero-buttons{animation-delay:.65s}
html.motion-ready .hero .hero-bottom{animation-delay:.76s}
html.motion-ready .hero .hero-showcase{animation:hma-arrive 1.05s .38s var(--hma-move) both}
.hero {isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.8;background:radial-gradient(460px circle at var(--hero-x,65%) var(--hero-y,47%),#699ec31b,transparent 65%)}
.hero .hero-grain {animation:hma-drift 26s ease-in-out infinite alternate}
.hero .hero-orbit-1{animation:hma-drift 18s ease-in-out infinite alternate}
.hero .hero-orbit-2{animation:hma-drift 28s ease-in-out infinite alternate-reverse}
.hero .hero-grid{z-index:1}
.hero .hero-color{background:linear-gradient(120deg,#699ec3,#bbdbf1 45%,#699ec3 72%);background-size:210% 100%;color:transparent;background-clip:text;-webkit-background-clip:text}
.hero .scroll-indicator>span:last-child {display:inline-block;animation:hma-letter-lift 1.9s ease-in-out infinite}
/* Slide image framing and playback bar. */
.showcase-panel{transform-style:preserve-3d;transform:perspective(1400px) rotateX(var(--showcase-rx,0deg)) rotateY(var(--showcase-ry,0deg));transition:transform .45s var(--hma-move),box-shadow .45s var(--hma-move);will-change:transform}
.showcase-panel::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(370px circle at var(--spot-x,50%) var(--spot-y,45%),#ffffff12,transparent 75%);mix-blend-mode:screen}
.showcase-glow{animation:hma-drift 10s ease-in-out infinite}
.float-note{animation:hma-float 5s ease-in-out infinite;will-change:transform}
.slide.is-active{animation:hma-slide-zoom 7s ease-out both}
@keyframes hma-slide-zoom{from{transform:scale(1.025)}to{transform:scale(1.075)}}
.slide-content strong,.slide-content small,.slide-content a{transition:opacity .5s ease,transform .65s var(--hma-move)}
.slide:not(.is-active) .slide-content strong,.slide:not(.is-active) .slide-content small,.slide:not(.is-active) .slide-content a{opacity:0;transform:translateY(16px)}
.slide.is-active .slide-content small{transition-delay:.13s}
.slide.is-active .slide-content strong{transition-delay:.22s}
.slide.is-active .slide-content a{transition-delay:.33s}
.showcase-panel .hma-slide-progress{position:absolute;top:0;left:0;width:100%;height:3px;background:#bcd9ea;z-index:12;transform:scaleX(0);transform-origin:left center;box-shadow:0 0 9px #699ec3a8;pointer-events:none}
.showcase-panel.hma-progress-running .hma-slide-progress{animation:hma-line-progress 6.6s linear forwards}
.showcase-panel.hma-progress-paused .hma-slide-progress{animation-play-state:paused}
[dir=rtl] .showcase-panel .hma-slide-progress{transform-origin:right center}
/* Organic reveal: progressive enhancement only, IO adds is-visible. */
html.js.motion-ready .reveal{opacity:0;filter:blur(2px);transform:translate3d(0,28px,0);transition:opacity .85s var(--hma-move),transform .85s var(--hma-move),filter .85s var(--hma-move)}
html.js.motion-ready .reveal.is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0);transition-delay:var(--hma-delay,0ms)}
html.js.motion-ready .reveal.is-visible.brand-card{transform:translate3d(0,0,0)}
/* Accent line painting as the block enters the viewport. */
.section-heading-row{position:relative}
.section-heading-row::after{content:"";position:absolute;bottom:-1px;left:0;height:2px;width:96px;background:linear-gradient(90deg,var(--burgundy),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform 1s .2s var(--hma-move)}
.section-heading-row.is-visible::after{transform:scaleX(1)}
[dir=rtl] .section-heading-row::after{left:auto;right:0;transform-origin:right}
/* Stat digits: subtle brightness and underline, no made-up business results. */
.stat{position:relative;transition:background .3s,padding .3s}
.stat::after{content:"";position:absolute;bottom:-35px;left:12px;right:12px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .4s var(--hma-move)}
.stat:hover::after{transform:scaleX(1)}
.stat-number{display:inline-block;min-width:1.75ch;font-variant-numeric:tabular-nums;letter-spacing:-.08em;transition:color .35s,filter .35s}
.stat:hover .stat-number{color:var(--blue);filter:drop-shadow(0 4px 13px #699ec344)}
.stat-number.hma-count-finished{animation:hma-digit-land .55s var(--hma-move) both}
@keyframes hma-digit-land{0%{transform:scale(1.13);color:var(--blue)}100%{transform:scale(1);color:var(--ink)}}
.stat-infinity{animation:hma-float 5s ease-in-out infinite}
/* Interactive cards — a tasteful lift, moving highlight, zoomed photographs. */
.brand-card{isolation:isolate;position:relative;overflow:hidden;transition:box-shadow .45s var(--hma-move),border-color .45s var(--hma-move),transform .4s var(--hma-move)!important}
.brand-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(300px circle at var(--card-x,50%) var(--card-y,40%),#699ec333,transparent 75%);transition:opacity .4s}
.brand-card:hover::after{opacity:1}
html.js.motion-ready .brand-card.is-visible:hover{transform:translate3d(0,-9px,0) perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));border-color:#699ec38f;box-shadow:0 24px 70px #152c3b33}
.brand-card .brand-card-image{position:relative;overflow:hidden;isolation:isolate;background-size:cover;transition:background-size 1.1s var(--hma-move),filter .8s}
.brand-card .brand-card-image::after{content:"";position:absolute;inset:-40% auto -40% -30%;width:32%;background:linear-gradient(90deg,transparent,#ffffff27,transparent);pointer-events:none;transform:translateX(-180%) rotate(18deg);transition:transform 1s var(--hma-move);z-index:1}
.brand-card:hover .brand-card-image::after{transform:translateX(520%) rotate(18deg)}
.brand-card:hover .brand-card-image{background-size:110% 110%;filter:saturate(1.08)}
.brand-card .category-pill,.brand-card .image-count{position:relative;z-index:2}
.brand-card .circle-arrow{display:grid;place-items:center;transition:transform .4s var(--hma-move),background-color .3s,color .3s}
.brand-card:hover .circle-arrow{transform:rotate(45deg);background:var(--blue);color:#10151b}
.brand-link{position:relative;overflow:hidden}
.brand-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--hma-move)}
.brand-card:hover .brand-link::after,.brand-link:focus-visible::after{transform:scaleX(1)}
.brand-link span:last-child{transition:transform .3s var(--hma-move)}
.brand-card:hover .brand-link span:last-child{transform:translate(4px,-4px)}
[dir=rtl] .brand-card:hover .brand-link span:last-child{transform:translate(-4px,-4px)}
/* Magnetic interactions; JS manages only CSS variables. */
.hma-magnetic{--hma-mx:0px;--hma-my:0px;transform:translate3d(var(--hma-mx),var(--hma-my),0);transition:transform .3s var(--hma-move),background .25s,border-color .25s,box-shadow .25s}
.hma-magnetic:hover{box-shadow:0 8px 26px #699ec32a}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:-110%;bottom:-110%;left:0;width:45%;background:linear-gradient(90deg,transparent,#ffffff31,transparent);transform:translateX(-140%) rotate(24deg);transition:transform .75s var(--hma-move);pointer-events:none}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(400%) rotate(24deg)}
.btn .btn-arrow{transition:transform .28s var(--hma-move)}
.btn:hover .btn-arrow{transform:translate(3px,-3px)}
/* About monogram, vision, principles and contact finish */
.about-symbol{user-select:none;filter:drop-shadow(0 0 0 transparent);transition:filter .7s}
.about-symbol:hover{filter:drop-shadow(0 0 22px #699ec348)}
.about-symbol span{display:inline-block;transition:transform .65s var(--hma-move),opacity .65s}
.about-symbol:hover span:nth-child(1){transform:translateY(-11px) rotate(-2deg)}
.about-symbol:hover span:nth-child(2){transform:translateY(7px)}
.about-symbol:hover span:nth-child(3){transform:translateY(-8px) rotate(3deg)}
.vision-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(550px circle at var(--vision-x,80%) 40%,#699ec31e,transparent 70%)}
.vision-content{z-index:1}
.vision-deco{transition:transform .8s var(--hma-move);will-change:transform;transform:translateY(calc(-50% + var(--vision-shift,0px)))}
.globe-ring.one{animation:hma-ring-1 13s linear infinite}
.globe-ring.two{animation:hma-ring-2 16s linear infinite}
.globe-ring.three{animation:hma-ring-3 18s linear infinite}
@keyframes hma-ring-1{from{transform:rotate(60deg) scaleX(.49)}to{transform:rotate(420deg) scaleX(.49)}}
@keyframes hma-ring-2{from{transform:rotate(-60deg) scaleX(.49)}to{transform:rotate(-420deg) scaleX(.49)}}
@keyframes hma-ring-3{from{transform:rotate(0deg) scaleY(.50)}to{transform:rotate(360deg) scaleY(.50)}}
.globe-core{animation:hma-float 4s ease-in-out infinite}
.principle{position:relative;padding-inline:13px;transition:background .25s,padding .35s var(--hma-move)}
.principle:hover{background:color-mix(in srgb,var(--blue) 7%,transparent);padding-inline:21px}
.principle>b{transition:transform .3s,color .3s}
.principle:hover>b{transform:translate(3px,-4px);color:var(--blue)}
.location-card{position:relative;overflow:hidden;transition:box-shadow .4s,transform .4s var(--hma-move),border-color .4s}
.location-card::before{content:"";position:absolute;inset:0;border-top:3px solid var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--hma-move)}
.location-card:hover{transform:translateY(-7px);border-color:#699ec388;box-shadow:0 19px 60px #00000018}
.location-card:hover::before{transform:scaleX(1)}
[dir=rtl] .location-card::before{transform-origin:right}
.contact-form-wrap{transition:box-shadow .4s,transform .4s}
.contact-form-wrap:hover{box-shadow:0 25px 65px #00000018}
.contact-form :is(input,select,textarea){transition:border-color .25s,box-shadow .25s,background-color .25s}
.contact-form :is(input,select,textarea):focus{border-color:var(--blue);box-shadow:0 0 0 3px #699ec326}
.floating-whatsapp{transition:transform .35s var(--hma-move),box-shadow .35s}
.floating-whatsapp:hover{transform:translateY(-5px) scale(1.06);box-shadow:0 12px 33px #25d36655}
.floating-whatsapp::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #25d36666;animation:hma-pulse 3.2s ease-in-out infinite;pointer-events:none}
.back-to-top.show:hover{transform:translateY(-5px);background:var(--blue);color:#10151b}
/* Scrolling horizontally must never be required. Touch and RTL remain stable. */
@media (max-width:1020px){html.js.motion-ready .brand-card.is-visible:hover{transform:translateY(-5px)}.brand-card:hover .brand-card-image{background-size:cover}.showcase-panel{transform:none!important}.hero::after{opacity:.55}.float-note{animation-duration:6s}}
@media (hover:none),(pointer:coarse){.hma-magnetic{transform:none!important}.brand-card:hover{transform:none!important}.location-card:hover{transform:none}.float-note{animation-duration:7s}}
@media (prefers-reduced-motion:reduce){
  html.motion-ready .hero .eyebrow,html.motion-ready .hero h1>span,html.motion-ready .hero .hero-desc,html.motion-ready .hero .hero-buttons,html.motion-ready .hero .hero-bottom,html.motion-ready .hero .hero-showcase{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  html.js.motion-ready .reveal,html.js.motion-ready .reveal.is-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hma-scroll-progress{transition:none}.hero .hero-grain,.hero .hero-orbit-1,.hero .hero-orbit-2,.float-note,.globe-ring,.globe-core,.stat-infinity,.floating-whatsapp::before,.showcase-panel .hma-slide-progress{animation:none!important}
  .showcase-panel{transform:none!important}.slide.is-active{animation:none!important}
  .brand-card,.location-card,.principle,.btn,.hma-magnetic{transform:none!important;transition:none!important}
}

/* Three services deserve equal visual weight on wide screens. */
@media (min-width:1100px){.brand-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:761px) and (max-width:1099px){.brand-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}