.brands-section{padding:3rem;background:var(--surface)}.brand-logos{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.brand-logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--white);font:12px var(--ff-mono)}.brand-logo img{width:75px;height:45px;object-fit:contain;background:#fff;padding:5px;border-radius:3px}.portfolio-selects{display:flex;gap:1.4rem;flex-wrap:wrap;margin:0 0 2rem}.portfolio-selects label{font-size:12px;color:var(--text)}.portfolio-selects select{display:block;margin-top:.4rem;background:var(--surface);color:var(--white);border:1px solid #494038;padding:.7rem;max-width:280px}.video-card{text-align:left;color:var(--text)}.video-card .video-title{line-height:1.4}.play-btn{color:var(--black);display:grid;place-items:center}.integration-badge{display:flex;align-items:center;gap:12px;margin-top:12px;color:var(--amber);font:10px var(--ff-mono)}.integration-badge img{width:35px;height:25px}.client-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}.client-card{border:1px solid var(--border);padding:1.5rem;color:var(--white);text-align:left;display:flex;flex-direction:column;gap:.6rem;background:var(--surface)}.client-card:hover{border-color:var(--amber)}.client-card img,.client-initial{width:54px;height:54px;border-radius:50%;object-fit:cover}.client-initial{background:var(--amber-dim);display:grid;place-items:center;font:30px var(--ff-display)}.client-card small{color:var(--amber)}#totalViews{font-size:clamp(24px,3.3vw,52px)}#countCoverage{display:block;font-size:10px;color:var(--text);margin-top:8px}.modal-video.portrait{aspect-ratio:9/16;width:min(360px,80vw);height:min(72vh,640px);padding:0;margin:auto}.empty-state{padding:2rem;color:var(--text)}:focus-visible{outline:2px solid var(--amber);outline-offset:5px}@media(max-width:600px){.brands-section{padding:2rem 1.5rem}.brand-logos{gap:1rem}.portfolio-selects{display:grid;grid-template-columns:1fr}.portfolio-selects select{max-width:100%;width:100%}.integration-badge{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}
.modal-backdrop:not(.open),.mobile-nav:not(.open){visibility:hidden}.contact-info-row a{color:inherit}.modal-video.portrait{background:var(--black)}

.brand-filter{padding:.75rem 1rem;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;border-radius:4px;transition:border-color .2s,background .2s}
.brand-filter:hover,.brand-filter[aria-pressed="true"]{border-color:var(--amber);background:var(--amber-dim)}
.brand-filter-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--amber);color:var(--white);font:12px var(--ff-mono)}
.brand-filter-status[hidden]{display:none}
.brand-filter-status button{background:transparent;border:0;color:var(--amber);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#portfolio{scroll-margin-top:90px}
#portfolio:focus{outline:none}

/* Personal introduction and a curated, quieter homepage. */
#about.intro-section{padding:130px max(6vw,24px) 70px;min-height:90svh;display:grid;align-items:center;background:radial-gradient(ellipse at 15% 40%,#e8a02009,transparent 60%),var(--black)}
.intro-section .about-grid{width:100%;max-width:1180px;margin:auto;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,90px);align-items:center}
.intro-section .about-image{width:100%;max-width:410px;justify-self:center}
.intro-section .about-img-wrap{aspect-ratio:4/5}
.intro-section .about-img-inner img{width:100%;height:100%;object-fit:cover;object-position:center}
.intro-section .reveal{opacity:1;transform:none}
.intro-section .about-img-accent{display:none}
.intro-section .section-title{font-size:clamp(52px,6vw,88px);margin-bottom:24px}
.intro-profession{font:10px var(--ff-mono);letter-spacing:.14em;color:var(--muted);margin:0 0 18px}
.intro-section .about-bio{font:400 clamp(16px,1.5vw,19px)/1.8 var(--ff-body);font-style:normal;border:0;padding:0;margin-bottom:20px}
.intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px}
.brands-section{text-align:center;overflow:hidden}
.brands-section .section-label{justify-content:center}
.brand-logos{justify-content:center;padding:18px 0;gap:1.5rem}
.brand-filter{animation:brand-float 4s ease-in-out infinite}
.brand-filter:nth-child(2n){animation-delay:-1s}.brand-filter:nth-child(3n){animation-delay:-2s}
.brand-logos:hover .brand-filter,.brand-logos:focus-within .brand-filter,.brand-logos.paused .brand-filter{animation-play-state:paused}
@keyframes brand-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}
.motion-control{font:10px var(--ff-mono);color:var(--text);background:none;border:0;border-bottom:1px solid var(--border);padding:8px;cursor:pointer}
#filterTabs[hidden],#workFilters[hidden]{display:none}
.work-more{display:flex;justify-content:center;margin-top:40px}
#workStatus:empty{display:none}#workStatus{margin-bottom:20px}
.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.skill-card{display:flex;align-items:center;gap:20px;border:1px solid var(--border);padding:26px;background:var(--surface)}
.skill-card h3{font:400 15px var(--ff-body);color:var(--white)}
.skill-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;color:var(--amber)}
.skill-icon svg{width:32px;height:32px}
.app-icon{background:#18103a;border:1px solid #8d75ea;border-radius:9px;color:#bda9ff;font:600 23px var(--ff-body)}
@media(max-width:760px){#about.intro-section{padding-top:100px;min-height:0}.intro-section .about-grid{grid-template-columns:1fr;gap:32px}.intro-section .about-image{max-width:290px}.intro-section .about-text{max-width:560px;margin:auto}.intro-section .about-tag{left:10px;top:15px}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-card{padding:18px;gap:12px}.brand-logos{gap:.5rem}}
@media(max-width:420px){.skills-grid{grid-template-columns:1fr}.intro-actions{gap:18px}}
@media(prefers-reduced-motion:reduce){.brand-filter{animation:none}.motion-control{display:none}}
