/* One Frame global interaction layer — 2026-09-28 */
:root{--of-ease:cubic-bezier(.2,.72,.2,1)}
html{scroll-padding-top:104px}
body{overflow-x:clip}
.of-scroll-progress{position:fixed;z-index:999;left:0;top:0;width:100%;height:2px;pointer-events:none;background:transparent}
.of-scroll-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#315bff,#7690ff,#c2ff48);transform:scaleX(0);transform-origin:left center;will-change:transform}
.of-header{transition:background-color .35s ease,box-shadow .35s ease,transform .35s ease}
body.of-scrolled .of-header{box-shadow:0 12px 40px rgba(15,23,42,.08)}
body.page-id-7.of-scrolled .of-header{box-shadow:0 16px 46px rgba(0,0,0,.36)}
.of-header .menu a[aria-current="page"]{color:var(--of-blue,#315bff)}
.of-header .menu a[aria-current="page"]:after{right:0}

/* Reveal is progressive enhancement: content remains visible without JS. */
.of-motion-ready [data-of-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .8s var(--of-ease),transform .8s var(--of-ease);transition-delay:var(--of-delay,0ms)}
.of-motion-ready [data-of-reveal="soft"]{transform:translate3d(0,18px,0)}
.of-motion-ready [data-of-reveal="left"]{transform:translate3d(-28px,0,0)}
.of-motion-ready [data-of-reveal="right"]{transform:translate3d(28px,0,0)}
.of-motion-ready [data-of-reveal].is-visible{opacity:1;transform:none}
img[loading="lazy"]{transition:opacity .5s ease,filter .5s ease}
img[loading="lazy"]:not(.of-img-ready){opacity:.2;filter:blur(8px)}
img.of-img-ready{opacity:1;filter:none}

.of-service-row,.content-card,.price-row,.case-detail,.webcase-waterfall-card,.of-method-grid article,.of-contact-channel{will-change:transform}
.of-service-row:focus-visible,.of-btn:focus-visible,.btn:focus-visible,.of-arrow-link:focus-visible,.of-channel-action:focus-visible{outline:3px solid rgba(49,91,255,.32);outline-offset:4px}
.of-btn,.btn,.of-arrow-link,.of-channel-action{position:relative;overflow:hidden;isolation:isolate}
.of-btn:after,.btn:after{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-135%);transition:transform .75s var(--of-ease)}
.of-btn:hover:after,.btn:hover:after{transform:translateX(135%)}

/* Lightweight project-access dock. Color is reserved for contact channels. */
.of-contact-dock{position:fixed;z-index:80;right:20px;bottom:22px;display:flex;align-items:center;gap:8px;padding:7px;border:1px solid rgba(15,23,42,.1);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 18px 55px rgba(15,23,42,.15);backdrop-filter:blur(18px) saturate(1.3);transform:translateY(18px);opacity:0;transition:opacity .35s ease,transform .35s var(--of-ease)}
.of-contact-dock.is-visible{opacity:1;transform:none}
.of-contact-dock a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;transition:transform .25s var(--of-ease),box-shadow .25s ease}
.of-contact-dock a::before{display:none!important;content:none!important}
.of-contact-dock a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(15,23,42,.14)}
.of-contact-dock svg{display:block;width:22px;height:22px;margin:auto}
.of-contact-dock .wa{background:#25d366}.of-contact-dock .mail{background:#315bff}
.of-contact-dock .project{display:flex;align-items:center;justify-content:center;width:auto;padding:0 16px;background:#111;color:#fff;font-size:12px;font-weight:800;line-height:1;letter-spacing:.02em}
body.page-id-7 .of-contact-dock{border-color:rgba(255,255,255,.12);background:rgba(9,12,18,.78)}
body.page-id-9 .of-contact-dock{display:none}

/* Refined desktop hover depth, never applied to touch layouts. */
@media(hover:hover) and (pointer:fine){
  .content-card,.of-method-grid article,.of-contact-channel,.price-row{transition:transform .35s var(--of-ease),box-shadow .35s ease,border-color .35s ease}
  body:not(.page-id-7) .content-card:hover,body:not(.page-id-7) .of-method-grid article:hover,body:not(.page-id-7) .of-contact-channel:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(15,23,42,.1);border-color:rgba(49,91,255,.2)!important}
  .price-row:hover{transform:translateX(5px)}
}

@media(max-width:700px){
  html{scroll-padding-top:78px}
  .of-scroll-progress{height:2px}
  .of-contact-dock{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));justify-content:stretch;padding:6px;border-radius:16px}
  .of-contact-dock .project{flex:1}
  .of-contact-dock a{height:44px}
  .of-contact-dock .wa,.of-contact-dock .mail{width:44px;flex:0 0 44px}
  body{padding-bottom:70px}
  .of-footer{margin-bottom:-70px;padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
  .of-motion-ready [data-of-reveal]{transform:translate3d(0,20px,0);transition-duration:.65s}
  .of-motion-ready [data-of-reveal="left"],.of-motion-ready [data-of-reveal="right"]{transform:translate3d(0,20px,0)}
}

@media(prefers-reduced-motion:reduce){
  .of-motion-ready [data-of-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .of-scroll-progress{display:none}.of-contact-dock,.of-contact-dock a,.of-btn:after,.btn:after,img[loading="lazy"]{transition:none!important}
}

/* Website intro: stable multilingual composition. Long translated CTAs must
   never steal width from the editorial copy column. */
body.page-id-7 .website-premium-intro{
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)!important;
  align-items:center!important;
  column-gap:clamp(42px,6vw,88px)!important;
}
body.page-id-7 .website-premium-copy{max-width:720px}
body.page-id-7 .website-premium-copy p{max-width:690px!important}
body.page-id-7 .website-premium-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-self:end;
  justify-content:stretch!important;
  align-content:center;
  width:min(100%,340px);
  gap:12px!important;
}
body.page-id-7 .website-premium-actions .btn{
  width:100%;
  min-height:56px;
  padding:12px 20px!important;
  white-space:normal!important;
  text-align:center;
  line-height:1.3;
}
html[lang="en"] body.page-id-7 .website-premium-copy h2,
html[lang="es"] body.page-id-7 .website-premium-copy h2,
html[lang="de"] body.page-id-7 .website-premium-copy h2,
html[lang="fr"] body.page-id-7 .website-premium-copy h2{
  max-width:680px;
  font-size:clamp(42px,4.3vw,64px);
  line-height:1.04;
  letter-spacing:-.05em;
}
@media(max-width:900px){
  body.page-id-7 .website-premium-intro{grid-template-columns:1fr!important;row-gap:28px!important;align-items:start!important}
  body.page-id-7 .website-premium-actions{justify-self:start;width:min(100%,520px)}
}
@media(max-width:700px){
  body.page-id-7 .website-premium-actions{width:100%}
  body.page-id-7 .website-premium-actions .btn{min-height:50px}
  html[lang="en"] body.page-id-7 .website-premium-copy h2,
  html[lang="es"] body.page-id-7 .website-premium-copy h2,
  html[lang="de"] body.page-id-7 .website-premium-copy h2,
  html[lang="fr"] body.page-id-7 .website-premium-copy h2{font-size:clamp(34px,10.5vw,46px);line-height:1.06}
}