/* Garagem470 2.0 — refinamento local, novembro de 2026. */
:root{--accent-on-dark:#ff656b;--surface:#fbfaf7;--copy:#56514a;--section-space:clamp(4.5rem,7.5vw,8rem)}
html{scroll-behavior:auto}
body{min-width:0}
.scroll-rail{display:none}
.container{width:min(100% - clamp(2.5rem,7vw,8rem),1460px)}
.hero-shell{width:100%;max-width:none}
.section{padding-block:var(--section-space)}
.eyebrow{margin-bottom:1.5rem;letter-spacing:.15em;font-size:.7rem}
.header-inner{min-height:88px}
.desktop-nav a{transition:color .2s,background .2s}
.desktop-nav .nav-contact:focus-visible{background:var(--ink);color:#fff}
.text-link{min-height:44px;white-space:normal;line-height:1.5}
.text-link:focus-visible{color:var(--red)}
.hero-stage{min-height:clamp(600px,calc(100svh - 88px),860px)}
.hero-slide{padding:8rem clamp(1.5rem,5vw,6rem) 5rem}
.hero-stage h1{font-size:clamp(4.4rem,10.3vw,11rem);letter-spacing:-.065em;line-height:.98;max-width:1250px;text-wrap:balance}
.hero-stage h1 em{color:var(--accent-on-dark)}
.hero-index{font-size:clamp(3rem,6vw,6rem);opacity:.4;bottom:2rem}
.hero-bottom{min-height:112px;gap:2rem}
.hero-bottom p{max-width:520px;font-size:1rem;line-height:1.55}
.hero-controls{gap:.25rem}
.hero-dot,.hero-dot.is-active{width:40px;height:44px;background:transparent;position:relative}
.hero-dot::before{content:'';position:absolute;left:8px;right:8px;top:20px;height:4px;background:#89847b;transition:background .2s,transform .2s}
.hero-dot.is-active::before{background:var(--red);transform:scaleX(1.3)}
.hero-dot:hover{background:transparent}
.hero-dot:hover::before{background:var(--ink)}
.hero-pause{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;margin-left:.5rem;transition:background .2s,color .2s}
.hero-pause:hover,.hero-pause:focus-visible{background:var(--ink);color:#fff}
.hero-pause svg{width:18px;height:18px;fill:currentColor}
.hero-pause[hidden]{display:none}
.has-carousel .hero-slide{opacity:0;visibility:hidden;pointer-events:none;z-index:0;transition:opacity .5s ease,visibility 0s .5s}
.has-carousel .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2;transition:opacity .5s ease,visibility 0s}
.has-carousel .hero-slide.is-leaving{z-index:1}
.has-motion .hero-visual,.has-carousel .hero-slide.is-active .hero-visual,
.has-motion .hero-kicker,.has-motion .hero-index,.has-motion .hero-stage h1,
.has-carousel .hero-slide.is-active h1,.has-motion .inner-hero .eyebrow,
.has-motion .inner-hero h1,.has-motion .inner-hero p:not(.eyebrow){animation:none}
.has-motion .hero-visual img{transform:none;will-change:auto}
.hero-arrow{top:36%;transition:background .2s}
.hero-arrow:hover{transform:none}
.hero-bottom .circle-link:hover{transform:none}
.intro h2,.section-heading h2,.approach h2,.about-statement h2,.contact-content h2,
.principles h2,.outcome h2{font-size:clamp(2.6rem,4.6vw,5.5rem);line-height:1.04;letter-spacing:-.055em;text-wrap:balance}
.intro-grid{gap:clamp(3rem,6vw,7rem)}
.intro p:not(.eyebrow){font-size:1.1rem;line-height:1.75;margin:1.75rem 0 2rem}
.intro-collage{min-height:clamp(450px,43vw,630px)}
.intro-photo{box-shadow:none}
.intro-photo--front{width:72%;height:60%}
.intro-collage__caption{font-size:.6rem;letter-spacing:.12em}
.section-heading{margin-bottom:3rem}
.section-heading h2{font-size:clamp(3rem,5.8vw,6.5rem)}
.service-grid{gap:1.5rem}
.service-card{transition:border-color .2s,box-shadow .2s}
.service-card__media{height:auto;aspect-ratio:16/10}
.service-card__body{min-height:270px;padding:1.75rem 2rem 2rem}
.service-card h3{font-size:clamp(2rem,3.25vw,3.8rem);line-height:1.06;letter-spacing:-.05em;margin:1.25rem 2rem 1rem 0}
.service-card p{color:var(--copy);line-height:1.6;padding-right:2.5rem}
.service-card:hover,.service-card:focus-visible{background:var(--surface);color:var(--ink);border-color:var(--red)}
.service-card:hover p{color:var(--copy)}
.service-card:hover .service-number{color:var(--red)}
.service-card:hover .connection-accent{stroke:var(--red)}
.service-card:focus-visible .service-card__media img{transform:scale(1.025)}
.service-card:hover .service-card__media img,.has-motion .service-card:hover .service-card__media.is-revealed img{transform:scale(1.025)}
.service-card .card-arrow{right:2rem;bottom:2rem}
.visual-interlude{height:clamp(480px,80svh,800px)}
.visual-interlude__frame{position:relative;height:100%}
.has-motion .visual-interlude__frame{clip-path:none;transform:none;will-change:auto}
.has-motion .visual-interlude__frame img{transform:none;will-change:auto}
.visual-interlude__number{display:none}
.visual-interlude__statement{font-size:clamp(2.8rem,6vw,6.75rem);letter-spacing:-.055em;line-height:1.04;bottom:clamp(2rem,5vw,5rem);max-width:1100px}
.visual-interlude__statement span{color:var(--accent-on-dark)}
.outcome-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem 5rem}
.outcome-photo{height:clamp(380px,40vw,580px)}
.outcome-note{font-size:1.12rem;line-height:1.7;align-self:center;margin-bottom:0}
.approach-grid{grid-template-columns:1.3fr 1fr;gap:clamp(3rem,7vw,7rem)}
.approach-copy p,.about-statement p:not(.eyebrow){font-size:1.08rem;line-height:1.75}
.inner-hero{padding-block:clamp(4.5rem,7.5vw,8rem)}
.inner-hero h1{font-size:clamp(3.2rem,7.4vw,8rem);letter-spacing:-.06em;line-height:1.02;max-width:1200px;text-wrap:balance}
.inner-hero p:not(.eyebrow){margin-top:2rem;line-height:1.65}
.inner-hero::after{opacity:.45;font-size:clamp(12rem,28vw,28rem)}
.detail-row{padding-block:3.5rem;gap:clamp(1.5rem,3vw,3rem);scroll-margin-top:2rem}
.detail-row h2{font-size:clamp(2.2rem,3.7vw,4rem);letter-spacing:-.05em;line-height:1.07}
.detail-row p{line-height:1.75;color:var(--copy)}
.detail-row li{font-size:.93rem;line-height:1.5;padding-block:1rem}
.detail-media{aspect-ratio:4/3}
.about-grid{grid-template-columns:.65fr 2fr;gap:3rem}
.about-statement h2{max-width:1050px;margin-bottom:2rem}
.principles h2{margin-bottom:3rem}
.principles-grid>div{min-height:290px;padding:1.75rem}
.principles-grid .principle-icon{width:40px;height:40px;margin-bottom:3rem}
.principles-grid h3{font-size:clamp(1.8rem,2.6vw,3rem);letter-spacing:-.045em;line-height:1.1}
.principles-grid p{line-height:1.65;max-width:260px}
.contact-band{padding-block:clamp(4rem,6vw,6rem)}
.contact-band h2{font-size:clamp(2.7rem,5.5vw,6.3rem);line-height:1.05;letter-spacing:-.055em;max-width:950px;text-wrap:balance}
.contact-band .button{min-height:56px;flex-shrink:0}
.button-white:focus-visible{background:var(--ink);color:#fff;outline-color:#fff}
.instagram-section{padding-block:var(--section-space)}
.instagram-section__grid{grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr)}
.instagram-section__visual{aspect-ratio:5/4;background:var(--ink);border-bottom:5px solid var(--red)}
.instagram-section__visual::before,.instagram-section__visual::after{border-radius:0;width:58%;height:58%;transform:rotate(-8deg);border-color:#ffffff40}
.instagram-section__visual::after{transform:translate(14%,12%) rotate(-8deg);border-color:var(--red)}
.instagram-section__visual svg{width:clamp(70px,8vw,110px)}
.instagram-section__visual span{font-size:clamp(1.2rem,2.1vw,1.8rem)}
.instagram-section h2{font-size:clamp(2.5rem,4.5vw,5rem);letter-spacing:-.055em;line-height:1.06}
.contact-grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.contact-methods{padding-top:0}
.contact-method{padding-block:1.7rem}
.contact-method strong{font-size:clamp(1.4rem,2.6vw,2.6rem);letter-spacing:-.045em;line-height:1.25}
.contact-method:focus-visible strong{color:var(--red)}
.contact-form-copy h2{font-size:clamp(2.5rem,4.2vw,4.8rem);line-height:1.08;letter-spacing:-.05em}
.contact-form-panel{padding:clamp(1.5rem,3vw,3rem);border-color:var(--line);border-top:3px solid var(--red)}
.contact-form-panel [data-selato-form]:empty{min-height:38rem;display:grid;place-items:center}
.contact-form-panel [data-selato-form]:empty::before{content:'Carregando formulário…';color:var(--copy);font-size:1rem}
.contact-form-panel .selato-field input,.contact-form-panel .selato-field select,.contact-form-panel .selato-field textarea{font-size:1rem;line-height:1.5;transition:border-color .2s}
.contact-form-panel .selato-field input:hover,.contact-form-panel .selato-field select:hover,.contact-form-panel .selato-field textarea:hover{border-color:var(--ink)}
.footer-inner{gap:clamp(2rem,4vw,4rem);padding-block:4rem 3rem}
.footer-inner .footer-brand img{width:clamp(240px,25vw,360px)}
.footer-links{gap:.25rem}
.footer-inner .footer-links a,.footer-links button{min-height:44px;display:inline-flex;align-items:center;line-height:1.4}
.footer-links h2{color:var(--accent-on-dark)}
.footer-bottom{padding-block:1.5rem 2rem}
.privacy-notice{max-height:calc(100dvh - 6rem);overflow-y:auto}
.privacy-dialog h2{letter-spacing:-.04em}
.floating-contact-clear .whatsapp-float:not(:focus-visible){visibility:hidden;opacity:0;pointer-events:none}
.hero-bottom .circle-link:hover .connection-accent{stroke:var(--accent-on-dark)}
.privacy-actions button,.privacy-dialog button{min-height:44px}
.has-motion .motion-item{transform:translate3d(0,12px,0);transition-duration:.4s}
.has-motion .motion-section::before{display:none}
.has-motion .intro-photo{transform:none;transition:none;opacity:1}
.has-motion .media-window[data-reveal-media] img,.has-motion .service-card__media img,.has-motion .detail-media img{clip-path:none}
.has-motion .media-window[data-reveal-media] figcaption{opacity:1}
.has-motion .services-art img,.has-motion .interior-art img,.has-motion .outcome-photo img{transform:none;will-change:auto}
.has-motion .service-card__media img{transition:transform .25s ease}
@media(min-width:1101px){.detail-media{position:sticky;top:2rem}}
@media(min-width:1101px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .has-motion .media-window img[data-depth-image]{transform:translateY(var(--media-shift,0px)) scale(1.04)}
}
@media(max-width:1100px){
  .contact-band-inner{display:block}.contact-band .button{margin-top:2rem}
  .principles-grid h3{font-size:2.25rem}.principles-grid>div{min-height:260px}
  .hero-stage h1{font-size:10.3vw}
}
@media(max-width:720px){
  .container{width:calc(100% - 2.5rem)}.hero-shell{width:100%}
  .header-inner{min-height:78px;gap:1rem}.brand img{width:172px}
  .mobile-nav summary{min-height:44px;display:flex;align-items:center;padding-inline:.25rem}
  .mobile-nav nav{right:0;width:min(290px,calc(100vw - 3.5rem));box-shadow:4px 4px 0 #17171518}
  .hero-stage{min-height:clamp(540px,calc(88svh - 78px),760px);max-height:none}
  .hero-slide{padding:7rem 1.25rem 3.5rem}
  .hero-stage h1,.hero-slide:first-child h1,.hero-slide:nth-child(2) h1,.hero-slide:nth-child(3) h1{font-size:clamp(2.4rem,11.4vw,5rem);line-height:1.04;letter-spacing:-.06em;margin-bottom:1rem}
  .hero-slide:nth-child(2) h1{font-size:clamp(2rem,9.7vw,4.5rem)}
  .hero-slide .hero-kicker{left:1.25rem;top:5.25rem;max-width:85%;line-height:1.6}
  .hero-slide .hero-marker{left:1.25rem;bottom:1.3rem;font-size:.5rem}
  .hero-slide:first-child .hero-visual img{object-position:58% center}
  .hero-slide:nth-child(2) .hero-visual img{object-position:60% center}
  .hero-slide:nth-child(3) .hero-visual img{object-position:62% center}
  .hero-topline{padding-inline:1.25rem;font-size:.53rem}
  .hero-arrow{top:38%;width:44px;height:44px}
  .hero-bottom{display:grid;grid-template-columns:1fr auto;padding:1.25rem;gap:1rem}
  .hero-bottom p{max-width:none;font-size:.9rem;grid-column:1/-1}
  .hero-controls{grid-column:1;grid-row:2;justify-content:flex-start;width:auto;padding:0}
  .hero-bottom .circle-link{grid-column:2;grid-row:2;width:44px;height:44px}
  .intro h2,.section-heading h2,.approach h2,.about-statement h2,.contact-content h2,.principles h2,.outcome h2{font-size:clamp(2.35rem,8.7vw,4.1rem);line-height:1.08;letter-spacing:-.05em}
  .intro .eyebrow,.about-statement .eyebrow{margin-bottom:1.5rem}
  .intro-grid,.approach-grid,.about-grid,.contact-grid,.outcome-grid{display:block}
  .intro-collage{min-height:clamp(380px,106vw,540px);margin-top:2.5rem}
  .intro p:not(.eyebrow){font-size:1.03rem}
  .section-heading{margin-bottom:2rem}.section-heading .text-link{margin-top:1.5rem}
  .service-grid{gap:1.25rem}.service-card__media{height:auto;aspect-ratio:4/3}
  .service-card__body{min-height:245px;padding:1.5rem}
  .service-card h3{font-size:2.25rem;line-height:1.07}.service-card p{font-size:1rem}
  .service-card .card-arrow{right:1.25rem;bottom:1.5rem}
  .visual-interlude{height:clamp(460px,70svh,650px)}.visual-interlude__frame{height:100%;position:relative}
  .visual-interlude__statement{font-size:clamp(2.5rem,9vw,4.6rem);left:1.25rem;right:1.25rem;bottom:2.5rem;line-height:1.05}
  .visual-interlude__label{left:1.25rem;top:1.5rem;font-size:.6rem;max-width:80%;line-height:1.6}
  .visual-interlude__frame img{object-position:58% center}
  .outcome-photo{height:380px;margin-top:2rem}.outcome-note{margin-top:2rem;font-size:1.05rem}
  .outcome-photo figcaption{font-size:.57rem;left:1rem;right:1rem}
  .inner-hero{padding-block:4rem 4.5rem}.inner-hero h1{font-size:clamp(2.6rem,9.5vw,4.5rem);letter-spacing:-.05em}
  .inner-hero p:not(.eyebrow){font-size:1.05rem;margin-top:1.5rem}
  .detail-row{padding-block:2.75rem}.detail-row h2{font-size:2.5rem}.detail-row p{font-size:1.03rem}
  .detail-media{position:static;margin-top:1.75rem;aspect-ratio:4/3}
  .principles-grid>div{min-height:240px;padding:1.5rem}.principles-grid .principle-icon{margin-bottom:2rem}
  .principles-grid h3{font-size:2.25rem}.principles h2{margin-bottom:2rem}
  .contact-band h2{font-size:clamp(2.4rem,9vw,4.6rem);margin-bottom:0;line-height:1.08}
  .contact-band .button{white-space:normal;gap:1.25rem;max-width:100%;min-height:56px}
  .instagram-section__grid{grid-template-columns:1fr}.instagram-section__visual{max-height:280px;aspect-ratio:4/3}
  .instagram-section h2{font-size:clamp(2.35rem,8.7vw,4rem)}
  .contact-methods{padding-top:2.5rem}.contact-method strong{font-size:clamp(1.25rem,6.4vw,2.4rem)}
  .contact-form-copy h2{font-size:2.5rem}.contact-form-panel{padding:1.5rem 1.25rem}
  .footer-inner{padding-block:3.5rem 2.5rem}.footer-inner .footer-brand img{width:260px}
  .footer-bottom{padding-bottom:6rem}
  .whatsapp-float{padding:.4rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
  .whatsapp-float__label{display:none}.whatsapp-float__icon{width:44px;height:44px}
  .privacy-notice{padding:1.25rem;bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
  .has-motion .media-window img[data-depth-image]{transform:none}
}
@media(hover:none){.service-card:hover .service-card__media img,.has-motion .service-card:hover .service-card__media.is-revealed img{transform:none}}
@media(prefers-reduced-motion:reduce){
  .has-carousel .hero-slide{transition:none}.hero-pause{display:none}
  .has-motion .motion-item{opacity:1;transform:none}
  .has-motion .media-window img[data-depth-image]{transform:none}
}