/* Eduardo Vieira: kinetic portfolio. Native scrolling, no external runtime. */
:root{--navy:#171b1e;--cream:#f3f1e9;--amber:#bd603f;--brown:#9d442d;--slate:#58605f;--line:#d4d3ca;--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:112px}
body{background:var(--cream)}
.header,.header.is-scrolled{height:104px;background:var(--cream);color:var(--navy);box-shadow:none;backdrop-filter:none;isolation:isolate}
.header:before{content:"";position:absolute;inset:0;background:var(--cream);transition:opacity .6s var(--motion-ease);z-index:-1}
.header-inner{height:92px;min-height:0;max-width:1280px;padding:0;border-bottom:1px solid #171b1e30;transition:height .65s var(--motion-ease),max-width .65s var(--motion-ease),padding .65s var(--motion-ease),border-radius .65s var(--motion-ease),background .65s var(--motion-ease),box-shadow .65s var(--motion-ease),transform .65s var(--motion-ease);transform-origin:top center}
.header.is-scrolled:before{opacity:0}
.header.is-scrolled{background:transparent}
.header.is-scrolled .header-inner{height:64px;max-width:1080px;padding:0 24px;border:1px solid #171b1e22;border-radius:50px;background:#f3f1e9ed;backdrop-filter:blur(20px);box-shadow:0 12px 40px #171b1e15;transform:translateY(12px)}
.brand img{width:48px;height:48px;object-fit:contain;transition:width .6s var(--motion-ease),height .6s var(--motion-ease),transform .65s var(--motion-ease)}
.brand strong{font:700 1.35rem/1.15 var(--sans);letter-spacing:-.04em;transition:font-size .6s var(--motion-ease)}
.brand-description{max-height:26px;opacity:.8;margin-top:4px;letter-spacing:.01em;font-size:.78rem;transition:max-height .6s var(--motion-ease),opacity .35s,margin .6s var(--motion-ease);overflow:hidden}
.header.is-scrolled .brand img{width:34px;height:34px;transform:rotate(-8deg)}
.header.is-scrolled .brand strong{font-size:1.05rem}
.header.is-scrolled .brand-description{opacity:0;max-height:0;margin:0}
.desktop-nav{gap:25px;font-size:.9rem}
.desktop-nav a:not(.nav-contact){position:relative;border:0;padding-block:8px}
.desktop-nav a:not(.nav-contact):after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--motion-ease)}
.desktop-nav a:not(.nav-contact):hover:after{transform:scaleX(1);transform-origin:left}
.nav-contact{border:1px solid var(--navy);border-radius:30px;padding:10px 18px;background:var(--navy);color:var(--cream)}
.nav-contact:hover{background:var(--amber);border-color:var(--amber);color:var(--cream)}
.mobile-nav .menu-lines{border-color:var(--navy);transition:transform .35s}
.mobile-nav[open] .menu-lines{transform:rotate(-45deg)}
.mobile-nav nav{border-radius:20px;border:1px solid var(--line);box-shadow:0 16px 40px #171b1e20}
.hero{background:var(--cream);color:var(--navy);position:relative}
.hero-inner{grid-template-columns:1.4fr .85fr;gap:32px;padding-top:70px;padding-bottom:40px;align-items:center;isolation:isolate}
.hero-copy{position:relative;z-index:2}
.hero-copy>.eyebrow{font-size:.75rem;letter-spacing:.09em;color:var(--brown);margin-bottom:34px}
.hero h1{font:700 clamp(3.5rem,6.3vw,7.5rem)/.99 var(--sans);letter-spacing:-.075em;max-width:870px;position:relative}
.hero h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.06em;color:var(--amber)}
.hero-intro{margin-top:32px;max-width:480px}
.hero-intro p{color:var(--slate);font-size:1.05rem;line-height:1.6}
.hero-actions{gap:26px;margin-top:28px}
.button{border-radius:40px;transition:background .3s,color .3s,translate .45s var(--motion-ease),transform .3s;translate:calc(var(--pointer-x,0)*8px) calc(var(--pointer-y,0)*8px)}
.button-cream{background:var(--navy);color:var(--cream)}
.button-cream:hover{background:var(--amber);color:var(--cream)}
.hero-photo{margin:32px 14px 0 0;position:relative;transform:translate(calc(var(--pointer-x,0)*12px),calc(var(--pointer-y,0)*12px + var(--hero-scroll,0)*65px)) rotate(calc(7deg - var(--hero-scroll,0)*12deg));transition:transform .5s var(--motion-ease);z-index:1}
.hero-photo img{height:clamp(380px,39vw,560px);width:100%;object-fit:cover;border-radius:18px;object-position:52% 62%;box-shadow:0 26px 50px #171b1e22}
.hero-photo:before{border-radius:18px;inset:-15px 15px 15px -15px;width:auto;height:auto;border:1px solid var(--amber);transform:rotate(-9deg);z-index:-1}
.hero-photo figcaption{color:var(--slate);font-size:.78rem;padding-top:18px}
.hero-bottom{color:var(--slate);border-color:var(--line);margin-top:48px;padding-block:22px;font-size:.82rem}
.hero-bottom a{border-color:var(--navy)}
.creative-strip{background:var(--navy);color:var(--cream);padding:30px 0;border-block:1px solid #ffffff25}
.strip-track{gap:50px;animation-duration:46s}
.strip-track span{font:700 clamp(3rem,5.2vw,6rem)/1.08 var(--sans);letter-spacing:-.065em}
.strip-track i{color:var(--amber);font-size:3rem}
.work{background:var(--navy);color:var(--cream);padding-top:100px;padding-bottom:130px}
.work .eyebrow,.work .project-type{color:#e6a487}
.work .section-heading>p,.work .project-description{color:#f3f1e9b3}
.section-heading h2,.services-intro h2,.about-copy h2{font:700 clamp(2.8rem,5.4vw,5.6rem)/1.03 var(--sans);letter-spacing:-.065em}
.section-heading h2 em,.services-intro h2 em,.about-copy h2 em{font:italic 400 1.1em/.95 var(--serif);color:var(--amber)}
.project-grid{grid-template-columns:1.15fr .85fr;gap:76px 65px;align-items:start}
.project-featured{grid-column:auto}
.project-featured .project-image img{aspect-ratio:1.17;object-position:50% 58%}
.project-image{border-radius:16px;transition:border-radius .55s var(--motion-ease)}
.project-card:hover .project-image{border-radius:45px 16px 45px 16px}
.project-card .project-image{transform:rotateX(calc(var(--pointer-y,0)*-3deg)) rotateY(calc(var(--pointer-x,0)*3deg));transition:transform .5s var(--motion-ease),border-radius .55s var(--motion-ease)}
.project-card:nth-child(even){margin-top:150px}
.project-card:nth-child(3){margin-top:-70px}
.project-name{font:700 1.75rem/1.15 var(--sans);letter-spacing:-.045em;margin-top:8px}
.project-type{font-size:.75rem}
.project-meta,.project-featured .project-meta{display:block;padding-top:22px}
.project-featured .project-description{max-width:420px;justify-self:auto;margin-top:10px}
.project-description{font-size:1rem;margin-top:10px}
.project-open{opacity:1;transform:none;border-radius:30px;background:var(--cream);color:var(--navy);right:16px;bottom:16px;font-size:.8rem;padding:10px 15px}
.project-card:hover .project-open{background:var(--amber);color:var(--cream)}
.services{background:var(--cream)}
.services-intro{top:125px}
.services-layout{grid-template-columns:.95fr 1.05fr;gap:100px}
.service summary{padding-block:32px}
.service h3{font:700 clamp(1.5rem,2.3vw,2rem)/1.15 var(--sans);letter-spacing:-.04em}
.service-content{padding-bottom:32px}
.service-toggle{transition:transform .4s var(--motion-ease)}
.service[open] .service-toggle{transform:rotate(180deg)}
.about{background:#e5e4dc}
.about-photo img{border-radius:50% 50% 12px 12px;max-height:620px}
.about-layout{grid-template-columns:.8fr 1.2fr;gap:105px}
.process{background:var(--cream)}
.process-grid li{position:relative}
.step-number{font:italic 3.5rem/1 var(--serif);color:var(--amber)}
.process-grid h3{font:700 1.5rem/1.12 var(--sans);letter-spacing:-.04em;margin-top:28px}
.journal-home{background:#e5e4dc}
.journal-home .section-heading h2{font-size:clamp(2.8rem,4.8vw,5rem)}
.story-image{border-radius:14px}
.story-copy h3{font:700 1.6rem/1.12 var(--sans);letter-spacing:-.04em}
.story-copy .eyebrow{font-size:.75rem}
.contact{background:var(--amber);color:var(--navy)}
.contact .eyebrow{color:var(--navy)}
.contact h2{font:700 clamp(3rem,6.5vw,7rem)/1 var(--sans);letter-spacing:-.065em}
.contact p:not(.eyebrow){color:var(--navy)}
.contact-mark{border-color:#171b1e40}
.contact-mark img{filter:brightness(0);width:170px}
.contact-mark p{font-size:1.4rem}
.contact-number{font-family:var(--sans);font-weight:700;letter-spacing:-.04em}
.footer{background:var(--navy);color:var(--cream)}
.reading-progress{height:2px;background:var(--amber)}
.blog-hero{background:var(--cream)}
.blog-hero h1,.case-hero h1,.article-header h1{font-family:var(--sans);font-weight:700;letter-spacing:-.065em;line-height:1.02}
.blog-hero h1 em{font-family:var(--serif);font-weight:400;color:var(--amber)}
.case-hero{background:var(--navy)}
.case-context{background:#e5e4dc}
.case-context h2,.case-cta h2,.article-next h2{font-family:var(--sans);font-weight:700;letter-spacing:-.06em}
.case-image button{border-radius:16px;overflow:hidden}
.article-cover img{border-radius:18px}
.article-next{background:#e5e4dc}
.js-reveal .reveal{transform:translateY(44px);transition:opacity .95s var(--motion-ease),transform 1.05s var(--motion-ease)}
.js-reveal .reveal.is-visible{transform:none}
@media(prefers-reduced-motion:no-preference){
 .hero-copy>.eyebrow{animation:edu-arrive .9s var(--motion-ease) both}
 .hero h1{animation:edu-arrive 1.2s .1s var(--motion-ease) both}
 .hero-intro{animation:edu-arrive 1.2s .2s var(--motion-ease) both}
 .hero-photo img{animation:edu-photo 1.4s .15s var(--motion-ease) both}
}
@keyframes edu-arrive{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes edu-photo{from{opacity:0;clip-path:inset(12% 0 12% 0 round 150px)}to{opacity:1;clip-path:inset(0 round 18px)}}
@media(min-width:1600px){.hero h1{font-size:7.2rem}.hero-inner{gap:45px}.hero-photo img{height:610px}}
@media(max-width:1100px){.desktop-nav{gap:18px}.hero-inner{grid-template-columns:1.35fr .85fr;gap:20px}.hero h1{font-size:clamp(3.5rem,6.2vw,5rem)}.hero-photo img{height:450px}.project-grid{gap:65px 35px}.services-layout,.about-layout{gap:60px}}
@media(max-width:800px){
 .header,.header.is-scrolled{height:94px}.header-inner{height:82px}.header.is-scrolled .header-inner{height:60px;padding-inline:18px;width:calc(100% - 28px)}
 .brand strong{font-size:1.2rem}.brand img{width:42px;height:42px}.brand-description{font-size:.75rem}
 .hero-inner{grid-template-columns:1fr;padding-top:38px;padding-bottom:28px;gap:24px}.hero h1{font-size:clamp(3.3rem,8.6vw,5.5rem);max-width:710px}.hero-copy>.eyebrow{margin-bottom:26px}
 .hero-photo{width:70%;max-width:480px;margin:30px 12px 15px auto;transform:translateY(calc(var(--hero-scroll,0)*30px)) rotate(calc(5deg - var(--hero-scroll,0)*8deg))}.hero-photo img{height:400px}
 .hero-bottom{margin-top:18px}.project-card:nth-child(even){margin-top:85px}.project-card:nth-child(3){margin-top:-30px}.work{padding-block:80px}
 .services-layout{grid-template-columns:1fr;gap:45px}.services-intro{position:static}.about-layout{gap:50px}
 .section-heading h2,.services-intro h2,.about-copy h2{font-size:clamp(2.8rem,6.5vw,4.4rem)}
 .contact-mark{padding-left:25px}.contact h2{font-size:3.5rem}
}
@media(max-width:560px){
 .container{width:calc(100% - 40px)}.header-inner{gap:12px}.header.is-scrolled .header-inner{padding-inline:14px}.header.is-scrolled .brand{gap:8px}.header.is-scrolled .brand strong{font-size:.98rem}
 .header.is-scrolled .brand img{width:29px;height:29px}.mobile-nav summary{padding-left:8px;gap:10px;min-height:44px}.mobile-nav nav{width:min(290px,calc(100vw - 56px));top:calc(100% + 15px)}
 .hero h1{font-size:clamp(2.8rem,10.3vw,3.9rem);letter-spacing:-.065em;line-height:1.04}.hero-copy>.eyebrow{font-size:.72rem}.hero-intro{margin-top:24px}.hero-intro p{font-size:1rem}.hero-actions{gap:20px}
 .hero-photo{width:80%;margin-top:22px;margin-right:8px}.hero-photo img{height:310px}.hero-photo figcaption{font-size:.75rem}.hero-bottom{font-size:.75rem;gap:18px}
 .creative-strip{padding:25px 0}.strip-track{gap:30px}.strip-track span{font-size:3rem}.strip-track i{font-size:2rem}
 .project-grid{grid-template-columns:1fr;gap:48px}.project-card:nth-child(even),.project-card:nth-child(3){margin-top:0}.project-featured .project-image img{aspect-ratio:1.3}.project-name{font-size:1.65rem}
 .section-heading h2,.services-intro h2,.about-copy h2{font-size:3rem}.service summary{padding-block:27px}.service h3{font-size:1.5rem}.service-content{padding-left:0}.service-number{font-size:.8rem}
 .about-layout{grid-template-columns:1fr;gap:40px}.about-photo{max-width:330px}.process-grid{gap:30px}.step-number{font-size:2.8rem}.process-grid h3{font-size:1.35rem}
 .story-copy h3{font-size:1.7rem}.contact h2{font-size:3.4rem}.contact-mark img{width:110px}
 .blog-hero h1{font-size:3.1rem}.case-hero h1{font-size:3.5rem}.article-header h1{font-size:2.9rem}.article-next h2{font-size:2.5rem}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.header-inner,.brand img,.brand strong,.brand-description,.header:before,.button,.project-image,.service-toggle{transition:none!important}
 .hero-photo,.project-card .project-image{transform:none!important}.button{translate:none}.strip-track{animation:none}.hero h1,.hero-intro,.hero-copy>.eyebrow,.hero-photo img{animation:none}
 .js-reveal .reveal{transform:none;transition:none}.header.is-scrolled .header-inner{backdrop-filter:none}
}
@media print{.header,.header.is-scrolled{position:static;height:auto}.header-inner{height:auto}.work,.contact{background:white;color:black}.hero-photo{transform:none}.project-grid{display:block}.project-card:nth-child(even),.project-card:nth-child(3){margin-top:20px}.project-description{color:black!important}}