/* =========================================================================
   Studio Bruno Rezende - main stylesheet
   ========================================================================= */

@font-face {
	font-family: 'ScoutCond';
	src: url('../fonts/ScoutCond-Light.woff2') format('woff2'), url('../fonts/ScoutCond-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'ScoutCond';
	src: url('../fonts/ScoutCond-Bold.woff2') format('woff2'), url('../fonts/ScoutCond-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font: 'ScoutCond', 'Oswald', 'Arial Narrow', sans-serif;
	--black: #000;
	--white: #fff;
	--grey: #b3b3b3;
	--grey-dark: #959595;
	--text: #333;
	--header-h: 5em;
	--header-pad: 5em;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: var(--text);
	background: var(--white);
}
body.home, body.page-postwall, body.single-job { background: var(--black); color: var(--white); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s ease-out; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1; margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; width: 1em; height: 1em; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #ddd; }
::-webkit-scrollbar-thumb { background: #959595; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.skip-link:focus { position: fixed; top: 0; left: 0; z-index: 10000; width: auto; height: auto; clip: auto; padding: .5em 1em; background: #fff; color: #000; }

/* Wordmark ------------------------------------------------------------- */
.site-logo, .lightbox-logo, .home-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-weight: 700;
	text-transform: uppercase;
	line-height: .86;
	letter-spacing: .01em;
	color: var(--white);
	text-align: left;
}
.logo-studio { color: #999; font-size: 1em; }
.logo-name { color: var(--white); font-size: 1em; }

/* Buttons --------------------------------------------------------------- */
.button-hollow {
	display: inline-block;
	padding: .55em 1.6em .45em;
	border: 1px solid currentColor;
	font-size: 1.25em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: background .2s, color .2s;
}
.button-hollow:hover { background: currentColor; }
body.page-postwall .button-hollow:hover, body.single-job .button-hollow:hover { color: #000; background: #fff; }
.contact .button-hollow:hover { color: #fff; background: #000; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--header-h);
	padding: 0 var(--header-pad);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background: var(--black);
	color: var(--white);
	transition: transform .25s ease-out;
}
.admin-bar .site-header { top: 32px; }
.site-header .site-logo { font-size: 1.55em; justify-self: start; }
.header-center { justify-self: center; position: relative; }
.header-right { justify-self: end; display: flex; align-items: center; gap: 1em; }
.page-label { font-weight: 700; font-size: 1.5em; text-transform: uppercase; }

.menu-toggle { width: 2.2em; height: 2.2em; display: grid; place-items: center; }
.burger { display: block; width: 1.3em; }
.burger span { display: block; height: 2px; margin: 4px 0; background: #959595; border-radius: 2px; transition: transform .2s ease-in-out, opacity .2s; }
.menu-toggle:hover .burger span { background: #fff; }
.menu-toggle.is-active .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-active .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.video-close { display: none; width: 2.2em; height: 2.2em; font-size: 1em; color: #959595; }
.video-close svg { width: 1.4em; height: 1.4em; }
.video-close:hover { color: #fff; }
html.playing-video .video-close { display: grid; place-items: center; }
html.playing-video .menu-toggle { display: none; }

/* Category box (work page) --------------------------------------------- */
.category-box { position: relative; text-transform: uppercase; }
.category-current { display: flex; align-items: center; gap: .5em; font-size: 1.5em; font-weight: 300; line-height: 1; }
.category-current strong { font-weight: 700; }
.category-current .icon svg { width: .8em; height: .8em; }
.category-list {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	min-width: 100%;
	max-height: 0; overflow: hidden;
	background: rgba(0, 0, 0, .87);
	transition: max-height .25s ease-out;
	text-align: center;
	font-size: 1.5em;
	z-index: 20;
}
.category-box.is-open .category-list { max-height: 24em; }
.category-list a { display: block; padding: .5em 1.2em; white-space: nowrap; color: #fff; }
.category-list a:hover, .category-list a[aria-current] { text-shadow: 1px 0 0 currentColor; }

/* =========================================================================
   Full screen menu
   ========================================================================= */
.site-menu {
	position: fixed;
	top: var(--header-h); left: 0; right: 0; bottom: 0;
	z-index: 900;
	background: var(--black);
	opacity: 0;
	transform: scale(1.1);
	pointer-events: none;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.site-menu[hidden] { display: block; }
html.menu-open .site-menu { opacity: 1; transform: scale(1); pointer-events: all; }
.menu-frame { position: relative; width: calc(100vw - 10em); height: calc(100% - 2em); margin: 0 auto; overflow: hidden; }
.menu-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.menu-content {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100%; max-width: 24em;
	text-align: center;
	color: var(--grey);
}
.menu-list li { margin: .35em 0; }
.menu-list > li { opacity: 0; filter: blur(8px); transform: translateY(1em); transition: all .5s var(--ease); }
html.menu-open .menu-list > li { opacity: 1; filter: blur(0); transform: none; }
html.menu-open .menu-list > li:nth-child(1) { transition-delay: .15s; }
html.menu-open .menu-list > li:nth-child(2) { transition-delay: .2s; }
html.menu-open .menu-list > li:nth-child(3) { transition-delay: .25s; }
html.menu-open .menu-list > li:nth-child(4) { transition-delay: .3s; }
.menu-list a { display: inline-block; font-size: 3em; line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.menu-list a:hover, .menu-list .has-submenu.is-open > a { color: #fff; text-shadow: 1px 0 0 currentColor; }
.submenu { max-height: 0; overflow: hidden; transition: max-height .2s ease-out, margin .2s; margin: 0 auto; max-width: 18em; }
.has-submenu.is-open .submenu { max-height: 22em; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin: .5em auto; }
.submenu li { margin: .1em 0; }
.submenu a { font-size: 1.9em; letter-spacing: .06em; }
.social-list { display: flex; justify-content: space-around; max-width: 20em; margin: 1.2em auto 0; padding-top: .6em; border-top: 2px solid var(--grey); opacity: 0; transform: translateY(2em); transition: all .25s ease-out .45s; }
html.menu-open .social-list { opacity: 1; transform: none; }
.social-list a { display: block; padding: .4em; color: var(--grey); }
.social-list a:hover { color: #fff; }
.social-list svg { width: 1.6em; height: 1.6em; }

/* =========================================================================
   Home
   ========================================================================= */
body.home { overflow: hidden; }
body.home .site-header .site-logo { opacity: 0; pointer-events: none; }
html.playing-video body.home .site-header .site-logo { opacity: 1; pointer-events: all; }
.home { height: 100vh; padding: 7em 5em 2em; background: var(--black); }
.home-frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--black); }
.home-logo {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3.4em;
	z-index: 2;
	transition: opacity .25s;
}
.home-logo:hover .logo-studio { color: #ccc; }
.home-play {
	position: absolute; top: 0; right: 0;
	display: flex; align-items: center; gap: .3em;
	font-size: 1.55em;
	text-transform: uppercase;
	color: var(--grey);
	z-index: 3;
	transition: opacity .25s, color .25s;
}
.home-play svg { width: .95em; height: .95em; }
.home-play .tri, .home-play .ring { fill: none; stroke: #999; stroke-width: 2; transition: stroke .25s; }
.home-play:hover { color: #fff; }
.home-play:hover .tri, .home-play:hover .ring { stroke: #fff; }
.home-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease-out; }
.home-video iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; }
html.playing-video .home-video { opacity: 1; pointer-events: all; }
html.playing-video .home-logo, html.playing-video .home-play { opacity: 0; pointer-events: none; }

/* =========================================================================
   Work grid
   ========================================================================= */
.work { padding-top: var(--header-h); background: var(--black); min-height: 100vh; }
.work-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	grid-auto-flow: dense;
	gap: 0;
}
.work-item { position: relative; aspect-ratio: 3 / 4; }
.work-item.is-landscape { grid-column: span 2; aspect-ratio: 6 / 4; }
.work-card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.work-thumb { position: absolute; inset: 0; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-out; }
.work-card:hover .work-thumb img { transform: scale(1.06); }
.work-info {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 1em;
	text-align: center;
	background: rgba(0, 0, 0, .87);
	opacity: 0;
	transition: opacity .25s ease-out;
}
.work-card:hover .work-info, .work-card:focus-visible .work-info { opacity: 1; }
.work-title { font-size: 2em; line-height: 1; text-transform: uppercase; color: #fff; }
.work-photographer { font-size: 1.8em; line-height: 1; color: var(--grey-dark); margin-top: .2em; }
.work-footer { text-align: center; padding: 3em 1em 4em; }
.work-status { font-size: .9em; color: #666; margin: 1em 0 0; }
.work-empty { text-align: center; padding: 4em 1em; color: #888; font-size: 1.5em; }
#load-more.is-loading { opacity: .5; pointer-events: none; }
.back-to-top {
	position: fixed; right: 2em; bottom: 2em;
	width: 3.2em; height: 3.2em;
	border: 2px solid #fff;
	color: #fff;
	display: grid; place-items: center;
	opacity: 0; transform: scale(0);
	transition: all .4s cubic-bezier(0.88, -0.1, 0.34, 1.6);
	z-index: 500;
}
.back-to-top.is-visible { opacity: 1; transform: scale(.85); }
.back-to-top svg { width: 1.5em; height: 1.5em; }
@keyframes bounceAlpha { 0% { transform: translateY(-10%); opacity: 1; } 50% { transform: translateY(10%); opacity: .5; } 100% { transform: translateY(0); opacity: 1; } }
.back-to-top:hover svg { animation: bounceAlpha 1s linear infinite; }

/* Single job ------------------------------------------------------------ */
.work.single { padding-left: 5em; padding-right: 5em; padding-bottom: 4em; }
.job-header { padding: 2.5em 0 1.5em; text-align: center; }
.job-title { font-size: 3em; text-transform: uppercase; font-weight: 300; }
.job-meta { color: var(--grey-dark); font-size: 1.4em; margin: .3em 0 0; }
.job-meta span + span::before { content: '  |  '; }
.job-gallery { display: flex; flex-direction: column; align-items: center; gap: 1.5em; }
.job-gallery img { display: block; max-height: 90vh; width: auto; max-width: 100%; box-shadow: 0 7px 10px #000; }
.job-back { text-align: center; padding-top: 3em; }

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox {
	position: fixed; inset: 0;
	z-index: 5000;
	display: flex; flex-direction: column;
	background: var(--black);
	color: #fff;
	opacity: 0; pointer-events: none;
	transition: opacity .25s ease-out;
}
.lightbox[hidden] { display: flex; }
.lightbox.is-active { opacity: 1; pointer-events: all; }
.lightbox-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: .6em 5em;
	border-bottom: 1px solid rgba(255, 255, 255, .29);
}
.lightbox-logo { font-size: 1.55em; }
.lightbox-counter { font-size: 1.4em; color: rgba(255, 255, 255, .68); }
.lightbox-controls { display: flex; gap: .2em; font-size: 1.25em; }
.lightbox-controls button { padding: .5em; color: rgba(255, 255, 255, .48); transition: transform .15s, color .15s; }
.lightbox-controls button:hover { color: #fff; transform: scale(1.1); }
.lightbox-controls button.is-on { color: #fff; }
.lb-play svg:last-child { display: none; }
.lightbox.is-playing .lb-play svg:first-child { display: none; }
.lightbox.is-playing .lb-play svg:last-child { display: block; }
.lightbox-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 1em 5em; }
.lightbox-figure { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-image { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 7px 10px #000; opacity: 1; transition: opacity .2s; }
.lightbox-image.is-loading { opacity: 0; }
.lb-prev, .lb-next {
	position: absolute; top: 0; bottom: 0;
	width: 5em;
	color: rgba(255, 255, 255, .31);
	font-size: 1.6em;
	display: grid; place-items: center;
	transition: color .2s;
}
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb-prev:hover, .lb-next:hover { color: #fff; }
.lb-prev svg, .lb-next svg { width: 1.2em; height: 1.2em; }
.lightbox-info { position: absolute; left: 5em; bottom: 1.5em; font-size: 1.25em; line-height: 1.3; color: #818181; }
.lightbox-info div:empty, .lightbox-info div.is-empty { display: none; }
.lightbox-info em { font-style: normal; color: #fff; }
.lightbox-thumbs { flex: 0 0 4.5em; border-top: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transition: flex-basis .25s; }
.lightbox.no-thumbs .lightbox-thumbs { flex-basis: 0; border: 0; }
.lightbox-thumbs ul { display: flex; justify-content: center; gap: 1em; padding: .6em 1em; height: 100%; overflow-x: auto; scrollbar-width: none; }
.lightbox-thumbs ul::-webkit-scrollbar { display: none; }
.lightbox-thumbs li { flex: 0 0 auto; opacity: .35; transition: opacity .2s; }
.lightbox-thumbs li.is-current { opacity: 1; }
.lightbox-thumbs button { display: block; height: 3em; border: 1px solid #fff; background: #111; box-shadow: 0 4px 10px #000; }
.lightbox-thumbs li.is-current button { border-width: 2px; }
.lightbox-thumbs img { display: block; height: 100%; width: auto; }

/* =========================================================================
   Studio
   ========================================================================= */
.studio-section { position: relative; min-height: 100vh; }
.studio-splash { display: flex; align-items: center; justify-content: center; gap: 4em; padding: 8em 5em 4em; }
.studio-text { max-width: 40em; font-size: 1.25em; line-height: 1.5; }
.studio-text p { margin: 0 0 1.2em; }
.studio-portrait { flex: 0 0 18em; height: 26em; background-size: cover; background-position: center; }
.our-team { background: #000; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 6em 3em; }
.our-team h2 { text-align: center; font-size: 6em; letter-spacing: 4px; margin-bottom: .3em; }
.team-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em 1.5em; }
.team-list li { flex: 0 0 11em; text-align: center; }
.team-photo { height: 14em; margin-bottom: .6em; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-list h3 { font-weight: 300; font-size: 1.5em; text-transform: uppercase; }
.team-list p { margin: .2em 0 0; color: var(--grey-dark); }
.technology { display: flex; align-items: center; padding: 6em 0 6em 15%; }
.tech-text { font-size: 1.75em; line-height: 1.25; }
.tech-text h2 { font-size: 3.4em; letter-spacing: 4px; margin-bottom: .3em; }
.tech-text ul { white-space: nowrap; }
.tech-logos { display: flex; align-items: center; gap: 1.2em; margin-top: 1em; }
.tech-logos img { height: 2.2em; width: auto; }
.tech-image { position: absolute; top: 0; right: 0; width: 25em; height: 100%; background-size: cover; background-position: center; }
.so-are-we { overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease-out; }
.slide.is-active { opacity: 1; }
.slide-prev, .slide-next {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 2.4em; height: 2.4em;
	border: 1px solid #eee; color: #eee;
	display: grid; place-items: center;
	z-index: 3;
	transition: border-color .2s, color .2s;
}
.slide-prev { left: 30%; } .slide-next { right: 30%; }
.slide-prev:hover, .slide-next:hover { border-width: 2px; }
.so-box {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 20em; padding: 1.5em;
	background: rgba(0, 0, 0, .38);
	text-align: center; color: #fff;
	opacity: 0; transition: opacity .2s ease-out .35s;
	z-index: 2;
}
.so-are-we.on-screen .so-box { opacity: 1; }
.so-box h2 { font-size: 2.2em; border-bottom: 4px solid #fff; display: inline-block; padding-bottom: 4px; }
.so-box h3 { font-weight: 300; font-size: 2.2em; margin-top: .3em; }
.scroll-button {
	position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 3em; height: 3em;
	border: 1.25px solid #444; color: #444;
	display: grid; place-items: center;
	z-index: 400;
	transition: all .25s ease-out;
}
.scroll-button svg { width: 1.4em; height: 1.4em; }
.scroll-button:hover, .scroll-button.is-light { border-color: #eee; color: #eee; }
.scroll-button.is-up svg { transform: rotate(180deg); }
body.at-bottom .scroll-button { bottom: 7.5em; }

/* =========================================================================
   Clients
   ========================================================================= */
.clients { display: flex; gap: 4em; padding: 10em 4.7em 4em; min-height: calc(100vh - 7.4em); }
.clients-brands, .clients-photographers { flex: 0 0 calc(50% - 2em); }
.section-label { font-size: 1.4em; font-weight: 300; text-transform: uppercase; margin: 0 0 1em .5em; }
.brand-list { display: flex; flex-wrap: wrap; }
.brand-list li { width: 4.4em; height: 4.6em; margin: 0 .8em 1em; }
.brand { display: block; width: 100%; height: 100%; }
.brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photographer-columns { display: flex; font-size: 1.4em; line-height: 1.3; }
.photographer-columns ul { flex: 1; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact { padding: 9em 5em 4em; max-width: 60em; margin: 0 auto; }
.contact.work-with-us { padding-top: 2em; }
.contact h2 { font-size: 3em; letter-spacing: 2px; text-transform: uppercase; }
.contact .lead { font-size: 1.25em; margin: .3em 0 1.5em; color: #666; }
.brz-form .hp { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em 2em; margin-bottom: 1.5em; }
.form-grid label { display: flex; flex-direction: column; gap: .3em; font-size: 1.1em; text-transform: uppercase; letter-spacing: .05em; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea {
	font: inherit; font-size: 1.05em; text-transform: none; letter-spacing: 0;
	padding: .6em .8em;
	border: 1px solid #999; border-radius: 0;
	background: #fff; color: #000;
}
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid #000; outline-offset: -1px; }
.form-grid input[type="file"] { padding: .4em 0; border: 0; }
.form-notice { padding: .8em 1em; border: 1px solid; font-size: 1.1em; margin: 0 0 1.5em; }
.form-notice.is-ok { color: #1a6b2a; border-color: #1a6b2a; }
.form-notice.is-error { color: #a1231e; border-color: #a1231e; }
.contact-details { font-style: normal; font-size: 1.25em; margin-top: 3em; color: #666; }
.contact-details a { color: #000; }

/* =========================================================================
   Plain pages / footer
   ========================================================================= */
.plain-page { padding: 8em 5em 4em; max-width: 50em; margin: 0 auto; min-height: 60vh; }
.plain-page h1 { font-size: 4em; text-transform: uppercase; margin-bottom: .3em; }
.plain-page .entry { font-size: 1.2em; line-height: 1.5; }
.not-found { text-align: center; }
.not-found h1 { font-size: 8em; }
.plain-list li { margin: .4em 0; font-size: 1.2em; }

.site-footer { background: var(--black); color: #fff; text-align: center; padding: 2em 1em 1.5em; }
.site-footer .social-list { opacity: 1; transform: none; border-top: 0; margin: 0 auto .5em; max-width: 16em; }
.footer-text { font-size: .85em; text-transform: uppercase; letter-spacing: .08em; color: #888; }
body.home .site-footer { display: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
	:root { --header-pad: 2em; }
	.lightbox-toolbar, .lightbox-stage { padding-left: 2em; padding-right: 2em; }
	.lightbox-info { left: 2em; }
	.technology { padding-left: 6%; }
	.tech-image { width: 18em; }
	.slide-prev { left: 15%; } .slide-next { right: 15%; }
}
@media (max-width: 800px) {
	:root { --header-h: 4em; --header-pad: 1em; }
	body { font-size: 15px; }
	.site-header .site-logo { font-size: 1.2em; }
	.page-label { font-size: 1.1em; }
	.category-current { font-size: 1.1em; }
	.menu-frame { width: 100%; height: 100%; }
	.menu-bg { display: none; }
	.menu-list a { font-size: 2.4em; }
	.submenu a { font-size: 1.5em; }
	.home { padding: 5em 0 0; }
	.home-logo { font-size: 2.6em; }
	.home-play { top: .5em; right: 1em; font-size: 1.2em; }
	.work-grid { grid-template-columns: repeat(3, 1fr); }
	.work-info { display: none; }
	.work.single { padding-left: 1em; padding-right: 1em; }
	.job-title { font-size: 2em; }
	.job-meta { font-size: 1.1em; }
	.back-to-top { display: none; }
	.lightbox-toolbar { padding: .5em 1em; }
	.lightbox-counter { display: none; }
	.lightbox-stage { padding: .5em 0; }
	.lb-prev, .lb-next { width: 2.5em; }
	.lightbox-info { display: none; }
	.lightbox-thumbs { display: none; }
	.studio-splash { flex-direction: column; padding: 6em 1.5em 3em; gap: 2em; }
	.studio-text { font-size: 1.15em; }
	.studio-portrait { flex-basis: auto; width: 13em; height: 18em; }
	.our-team h2, .tech-text h2 { font-size: 3em; }
	.our-team { padding: 4em 1em; }
	.team-list li { flex-basis: 8em; }
	.team-photo { height: 10em; }
	.technology { padding: 5em 1.5em; }
	.tech-text { font-size: 1.2em; }
	.tech-text ul { white-space: normal; }
	.tech-image { display: none; }
	.scroll-button { display: none; }
	.slide-prev { left: 1em; } .slide-next { right: 1em; }
	.clients { flex-direction: column; padding: 6em 1em 2em; gap: 2em; }
	.clients-brands, .clients-photographers { flex-basis: auto; }
	.section-label, .photographer-columns { text-align: center; }
	.brand-list { justify-content: center; }
	.brand-list li { width: 4em; height: 4.4em; }
	.photographer-columns { flex-direction: column; font-size: 1.2em; }
	.contact { padding: 6em 1.5em 2em; }
	.form-grid { grid-template-columns: 1fr; }
	.plain-page { padding: 6em 1.5em 2em; }
}
@media (max-width: 480px) {
	.work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
	html { scroll-behavior: auto; }
}