/* Refinements requested on 12 November 2026. Loaded last to preserve the existing design. */
.article-section,
.reference-article-layout > .article-section {
  max-width: 760px;
}
.sidebar-block {
  width: 100%;
  max-width: 240px;
  box-sizing: border-box;
}
/* Only the label is underlined on hover; keep original badge surfaces and colors. */
.hero-tags a:hover,
.hero-tags a:focus-visible {
  background: #0505051a;
  color: #050505;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}
.case-tags span:hover,
.case-facts small:hover,
.carousel-label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Matching the main dark hero CTA, at a 12px text size, within the demonstration only. */
.mini-screen button[data-start],
.mini-screen button[data-next],
.mini-screen button[data-reset] {
  font: 500 12px/1.5 Inter,Arial,sans-serif;
  color: #fafafa;
  background: linear-gradient(0deg,#fafafa00 50%,#fafafa33 100%), #050505;
  border: 1px solid #050505;
  border-radius: 6px;
  min-height: 45px;
  padding: 11px 19px;
  justify-content: center;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.mini-screen button[data-start]:hover:not(:disabled),
.mini-screen button[data-next]:hover:not(:disabled) {
  background: linear-gradient(0deg,#fafafa33,#fafafa33), #050505;
}
.mini-screen button[data-reset].booking-complete {
  background: #187a43;
  border-color: #187a43;
  color: #fff;
}
.mini-screen button[data-reset].booking-complete:hover {
  background: #126134;
  border-color: #126134;
}
/* Video behaves like an animated image: no controls, direct interaction, or audio. */
.original-article-media video[data-lazy-video] {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  background: #fafafa;
}
.original-article-media video[poster*="discovery-1"] { aspect-ratio: 18 / 23; }
.original-article-media video[poster*="design-system-3"],
.original-article-media video[poster*="prototipagem-5"] { aspect-ratio: 16 / 9; }
/* Each subsequent state is presented without jerking the demo layout. */
@keyframes booking-step-in {
  from { opacity: .35; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes section-enter {
  from { opacity: 0; transform: translate3d(0, 17px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .mini-screen[data-booking] > h4,
  .mini-screen[data-booking] > fieldset,
  .mini-screen[data-booking] > p,
  .mini-screen[data-booking] > .booking-options,
  .mini-screen[data-booking] > .booking-actions,
  .mini-screen[data-booking] > button {
    animation: booking-step-in .32s ease-out both;
  }
  .js:not(.paused) [data-enter]:not(.is-visible) {
    opacity: 0;
    transform: translate3d(0, 17px, 0);
  }
  .js:not(.paused) [data-enter].is-visible {
    animation: section-enter .62s cubic-bezier(.2,.8,.25,1) both;
    animation-delay: var(--enter-delay, 0ms);
  }
  .reference-project,
  .project-card,
  .method-card,
  .contact-panel,
  .related-case,
  .sidebar-block,
  .original-article-media,
  .case-chapter {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .button,
  .mini-screen button,
  .contact-form button {
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .faq details,
  .ds-faq details {
    transition: border-color .25s ease, background-color .25s ease;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reference-project:hover,
  .project-card:hover,
  .method-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 24px #05050512;
  }
  .contact-panel:hover,
  .sidebar-block:hover {
    box-shadow: 0 5px 18px #0505050b;
  }
  .related-case:hover {
    transform: translateX(2px);
  }
  .original-article-media:hover {
    box-shadow: 0 6px 22px #0505050a;
  }
  .button:active,
  .mini-screen button:active:not(:disabled),
  .contact-form button:active:not(:disabled) {
    transform: scale(.985);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-enter],
  .js [data-enter].is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.paused [data-enter],
.paused [data-enter].is-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* V24 - carousel image metadata, floating full-screen mobile menu and precise editorial refinements. */
.reference-hero{border-bottom:1px solid #05050526 !important}
.reference-hero .hero-inner{border-bottom:0 !important}
.carousel-card>picture{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.carousel-card>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel-card strong{max-width:min(220px,calc(100% - 100px));}
/* The green confirmation retains the gradient, padding, radius and Inter type of the hero CTA. */
.mini-screen button[data-reset].booking-complete{
 font:500 12px/1.5 Inter,Arial,sans-serif;
 background:linear-gradient(0deg,#fafafa00 50%,#fafafa33 100%),#177c48;
 border:1px solid #177c48;color:#fff;border-radius:6px;
 min-height:45px;padding:11px 19px;display:inline-flex;align-items:center;justify-content:center;
}
.mini-screen button[data-reset].booking-complete:hover:not(:disabled){
 background:linear-gradient(0deg,#fafafa26,#fafafa26),#136c3e;
 border-color:#136c3e;
}
/* A persistent four-part progress track animates as the simulation advances. */
.mini-screen .demo-dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:20px;align-self:stretch;}
.mini-screen .demo-dots i{display:block;position:relative;overflow:hidden;width:100%;height:5px;border-radius:999px;background:#cdcdcd;}
.mini-screen .demo-dots i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#050505;transform:scaleX(0);transform-origin:left center;transition:transform .44s cubic-bezier(.2,.8,.2,1);}
.mini-screen .demo-dots i.reached::after{transform:scaleX(1)}
/* Case sidebars use the same rich, image-first links as the related project cards. */
.reference-article-layout .related-sidebar .sidebar-block .related-case{display:flex!important;align-items:center;gap:10px;margin:0 0 14px;text-decoration:none}
.reference-article-layout .related-sidebar .sidebar-block .related-case:last-child{margin-bottom:0}
.reference-article-layout .related-sidebar .sidebar-block .related-case picture{display:block;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border-radius:4px}
.reference-article-layout .related-sidebar .sidebar-block .related-case picture img{display:block;width:100%;height:100%;object-fit:cover}
.reference-article-layout .related-sidebar .sidebar-block .related-case span{display:block;flex:1;min-width:0;font:500 12px/1.4 Inter,Arial,sans-serif}
.reference-article-layout .related-sidebar .sidebar-block .related-case small{display:block;margin:2px 0 0;font:400 10px/1.35 Inter,Arial,sans-serif;color:#666}
.reference-article-layout .related-sidebar .sidebar-block .related-case i{margin-left:auto;flex:0 0 auto}
/* Accordion icons and smooth height transitions (script calculates native details height). */
.faq summary>i,.ds-faq summary>i{transition:transform .26s cubic-bezier(.2,.8,.25,1)}
.faq details[open] summary>i,.ds-faq details[open] summary>i{transform:rotate(180deg)}
/* Mobile navigation is a floating overlay covering the available viewport, leaving a small outer gutter. */
.mobile-nav-content{display:none}
@media(max-width:760px){
 html.mobile-menu-open{overflow:hidden}
 .header{z-index:150;isolation:isolate}
 .header .menu-toggle{margin-left:auto;display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:#050505;border-radius:6px;cursor:pointer}
 .header .menu-toggle-icon{display:block;font:400 28px/1 Inter,Arial,sans-serif;transform-origin:center;transition:transform .25s ease,opacity .25s ease}
 .header .menu-toggle[aria-expanded="true"] .menu-toggle-icon{transform:rotate(90deg)}
 .header nav#menu,.header nav#menu.open{
  display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;
  margin:0;width:100%;height:calc(100dvh - 106px);max-height:none;min-height:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  flex-direction:column;align-items:stretch;gap:0;padding:0;
  border:0;border-radius:12px;
  background:rgba(250,250,250,.985);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 44px #00000016;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-12px) scale(.985);transform-origin:top center;
  transition:opacity .26s ease,transform .32s cubic-bezier(.2,.8,.25,1),visibility .26s;
 }
 .header nav#menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
 .header nav#menu>.desktop-nav-link{display:none!important}
 .header nav#menu .mobile-nav-content{display:flex;flex:1;min-height:100%;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:16px 20px 20px;box-sizing:border-box}
 .header nav#menu .mobile-nav-primary{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 0;border:0!important;margin:0;background:transparent;border-radius:0;font:500 15px/1.3 Inter,Arial,sans-serif;color:#050505;text-decoration:none}
 .header nav#menu .mobile-nav-heading{display:block;margin:12px 0 6px;padding:0;border:0;font:600 11px/1.5 'Zilla Slab',Georgia,serif;letter-spacing:1.1px;text-transform:uppercase;color:#555}
 .header nav#menu a.mobile-nav-heading-link{color:#555;text-decoration:none}
 .header nav#menu .mobile-nav-card{display:flex!important;align-items:center;gap:12px;padding:6px 0;min-height:50px;margin:0;border:0!important;box-shadow:none!important;background:transparent;color:#050505;text-decoration:none!important;transform:none}
 .header nav#menu .mobile-nav-card picture{display:block;flex:0 0 44px;width:44px;height:44px;overflow:hidden;border-radius:5px}
 .header nav#menu .mobile-nav-card picture img{display:block;width:100%;height:100%;object-fit:cover}
 .header nav#menu .mobile-nav-card>span{display:block;flex:1;min-width:0;font:500 13px/1.25 Inter,Arial,sans-serif}
 .header nav#menu .mobile-nav-card small{display:block;margin:2px 0 0;color:#666;font:400 11px/1.3 Inter,Arial,sans-serif}
 .header nav#menu .mobile-nav-card>i{flex:0 0 auto;font-size:14px;color:#555}
 .header nav#menu a.mobile-nav-contact{margin-top:auto;padding-top:16px;min-height:40px;justify-content:space-between}
 .header nav#menu .mobile-nav-primary[aria-current="page"],.header nav#menu .mobile-nav-card[aria-current="page"]>span{font-weight:700;text-decoration:underline;text-underline-offset:3px}
 .header nav#menu .mobile-nav-card:hover>span,.header nav#menu .mobile-nav-primary:hover{text-decoration:underline;text-underline-offset:3px}
 .reference-article-layout .related-sidebar{width:100%;max-width:none;box-sizing:border-box}
 .reference-article-layout .related-sidebar .sidebar-block,.related-sidebar .sidebar-block,.sidebar-block{max-width:none;width:100%;box-sizing:border-box}
 .carousel-card strong{max-width:160px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .header .menu-toggle:hover .menu-toggle-icon{transform:scale(1.08)}
 .header nav#menu .mobile-nav-card:hover{background:#0505050b}
}
@media(prefers-reduced-motion:reduce){
 .header nav#menu,.header nav#menu.open,.header .menu-toggle-icon,
 .mini-screen .demo-dots i::after,.faq summary>i,.ds-faq summary>i{transition:none!important}
}
.paused .header nav#menu,.paused .header nav#menu.open,.paused .mini-screen .demo-dots i::after{transition:none!important}

/* V25: pointer capture works across the complete hero carousel stage. */
.hero-inner > .infinity-carousel{pointer-events:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.infinity-carousel .carousel-track{pointer-events:auto;touch-action:pan-y}
.infinity-carousel.dragging,.infinity-carousel.dragging .carousel-card{cursor:grabbing}
.infinity-carousel.dragging .carousel-track{transition:none}
.infinity-carousel .carousel-card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
/* Persistent demo progress: filled from left to right, not re-created between screens. */
.mini-screen .demo-dots i{background:#dfdedc;height:6px}
.mini-screen .demo-dots i::after{background:linear-gradient(90deg,#656565 0%,#050505 100%);transition:transform .72s cubic-bezier(.15,.9,.25,1)}
.mini-screen .demo-dots i.reached::after{transform:scaleX(1)}
/* Content reveal targets are selected hierarchically in interactions.js (V27). */
/* Mobile: same floating, opaque frosted surface as fixed header; two horizontal card rails. */
@media(max-width:760px){
 .header{background:rgba(250,250,250,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:12px;box-shadow:0 6px 25px #0000000b}
 .header nav#menu,.header nav#menu.open{
  flex:initial;width:100%;max-width:none;height:calc(100dvh - 106px);max-height:none;
  border:0!important;border-radius:12px!important;padding:0!important;margin:0!important;
  background:rgba(250,250,250,.985)!important;
  box-shadow:0 16px 44px #0000001a,0 2px 7px #00000008;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow:hidden;overscroll-behavior:contain;
 }
 .header nav#menu .mobile-nav-content{display:flex;flex-direction:column;min-height:0;height:100%;padding:0;gap:0}
 .header nav#menu .mobile-nav-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px 18px 12px;scrollbar-width:thin;
 }
 .header nav#menu .mobile-nav-primary{font-size:14px;line-height:1.35;min-height:35px;padding:6px 0}
 .header nav#menu .mobile-nav-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0 10px}
 .header nav#menu .mobile-nav-heading{margin:0;padding:0;font-size:11px;line-height:1.5}
 .header nav#menu .mobile-nav-see-all{display:inline-flex;align-items:center;gap:6px;font:500 11px/1.3 Inter,Arial,sans-serif;color:#050505;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
 .header nav#menu .mobile-nav-see-all span{font-size:13px}
 .header nav#menu .mobile-nav-cards{
  display:flex;gap:10px;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  padding:2px 2px 11px;scroll-snap-type:x proximity;scrollbar-width:thin;
 }
 .header nav#menu .mobile-nav-card.related-case{
  flex:0 0 clamp(132px,44%,170px);display:flex!important;flex-direction:column;align-items:stretch;
  box-sizing:border-box;gap:0;min-height:0;padding:0 0 10px;margin:0;
  scroll-snap-align:start;border:0!important;border-radius:8px!important;
  overflow:hidden;box-shadow:0 3px 13px #0000000a!important;background:#ffffff!important;
  text-decoration:none!important;transform:none;
 }
 .header nav#menu .mobile-nav-card picture{
  display:block;flex:none;width:100%;height:auto;aspect-ratio:1.38;overflow:hidden;border-radius:7px 7px 0 0
 }
 .header nav#menu .mobile-nav-card picture img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
 .header nav#menu .mobile-nav-card>span{display:block;flex:none;padding:10px 9px 0;font:600 12px/1.35 Inter,Arial,sans-serif;white-space:normal}
 .header nav#menu .mobile-nav-card small{margin:4px 0 0;font:400 10px/1.35 Inter,Arial,sans-serif;color:#666;overflow-wrap:anywhere}
 .header nav#menu .mobile-nav-card>i{display:none}
 .header nav#menu .mobile-nav-bottom{
  flex:none;padding:12px 18px max(16px,env(safe-area-inset-bottom));
  background:rgba(250,250,250,.99);box-shadow:0 -8px 20px #00000008;
 }
 .header nav#menu .mobile-nav-contact.button.secondary{
  display:flex;justify-content:center;align-items:center;width:100%;min-height:42px;
  margin:0!important;padding:11px 16px!important;
  border:1px solid #d4d4d4!important;border-radius:6px!important;
  font:500 12px/1.5 Inter,Arial,sans-serif!important;
  color:#050505;background:#fafafa;box-shadow:none;
  text-decoration:none!important;
 }
 .header nav#menu .mobile-nav-contact.button.secondary:hover{background:#e9e5e1;border-color:#999!important}
 .header nav#menu .mobile-nav-card[aria-current=page]{outline:2px solid #050505;outline-offset:-2px}
}
@media(max-width:360px){
 .header nav#menu .mobile-nav-scroll{padding:14px 14px 10px}
 .header nav#menu .mobile-nav-bottom{padding-inline:14px}
 .header nav#menu .mobile-nav-card.related-case{flex-basis:clamp(127px,45%,152px)}
 .header nav#menu .mobile-nav-primary{font-size:13px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .header nav#menu .mobile-nav-card:hover picture img{transform:scale(1.045)}
 .header nav#menu .mobile-nav-card:hover{box-shadow:0 8px 20px #00000014!important}
}
@media(prefers-reduced-motion:reduce){
 .mini-screen .demo-dots i::after,.header nav#menu .mobile-nav-card picture img{transition:none!important}
}
.paused .mini-screen .demo-dots i::after{transition:none!important}
/* Keep the active segment track unfilled until its animated overlay reaches the end. */
.mini-screen .demo-dots i.active{background:#dfdedc}
@media (prefers-reduced-motion:no-preference){
 .mini-screen[data-booking] .demo-step-content > h4,
 .mini-screen[data-booking] .demo-step-content > p,
 .mini-screen[data-booking] .demo-step-content > fieldset,
 .mini-screen[data-booking] .demo-step-content > .booking-actions,
 .mini-screen[data-booking] .demo-step-content > button{animation:booking-step-in .32s ease-out both}
}
/* Opaque menu surface prevents article typography from showing through a floating panel. */
@media(max-width:760px){
 .header nav#menu,.header nav#menu.open{background:#fafafa!important;backdrop-filter:none;-webkit-backdrop-filter:none}
}