/* ============================================
   SMAM - Main Stylesheet (Modernized)
   ============================================ */

/* ------ Custom Properties ------ */

:root {
    --color-body-bg: #4d4f52;
    --color-text-primary: #656254;
    --color-text-dark: #414042;
    --color-text-white: #fff;
    --color-red: #ef4648;
    --color-red-dark: #af000b;
    --color-red-nav: #ed2d3a;
    --color-red-orange: #e54200;
    --color-red-burnt: #cf5942;
    --color-wrapper-bg: #cccac2;
    --color-portfolio-bg: #3d3d3d;
    --font-regular: 'InterstateRegular', Arial, sans-serif;
    --font-bold: 'InterstateBold', sans-serif;
    --font-black: 'InterstateBlack', sans-serif;
    --font-black-condensed: 'InterstateBlackCondensed', sans-serif;
    --font-light: 'InterstateLight', Arial, sans-serif;
}

/* ------ Modern Reset ------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus {
    outline: 0;
}

:focus-visible {
    outline: 2px solid var(--color-red-nav);
    outline-offset: 2px;
}

body {
    color: black;
    line-height: 1;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    font-weight: normal;
    text-align: left;
}

blockquote::before, blockquote::after,
q::before, q::after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/* ------ Fonts ------ */

@font-face {
    font-family: 'InterstateBlack';
    src: url('../fonts/interstate_black-webfont.woff2') format('woff2'),
         url('../fonts/interstate_black-webfont.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'InterstateBlackCondensed';
    src: url('../fonts/interstate_blackcondensed-webfont.woff2') format('woff2'),
         url('../fonts/interstate_blackcondensed-webfont.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'InterstateBold';
    src: url('../fonts/interstate_bold-webfont.woff2') format('woff2'),
         url('../fonts/interstate_bold-webfont.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'InterstateLight';
    src: url('../fonts/interstate_light-webfont.woff2') format('woff2'),
         url('../fonts/interstate_light-webfont.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'InterstateRegular';
    src: url('../fonts/interstate_regular-webfont.woff2') format('woff2'),
         url('../fonts/interstate_regular-webfont.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: normal;
}

/* ------ Picture Element Reset ------ */
/* Ensure <picture> is layout-transparent */

picture {
    display: contents;
}

/* ------ Skip Link ------ */

.skip-link {
    background: var(--color-red-dark);
    color: var(--color-text-white);
    font-family: var(--font-bold);
    left: 0;
    padding: 8px 16px;
    position: absolute;
    top: -100%;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
}

/* ------ Global Layout ------ */

body {
    background: var(--color-body-bg);
    color: var(--color-text-primary);
    font-family: var(--font-regular);
    margin: 0 auto;
    padding-bottom: 50px;
    text-align: center;
}

body.original {
    background: #282828 url('../images/bg.jpg') no-repeat center -150px;
}

body.current {
    background: #1b1b1b;
}

body.updated {
    background: var(--color-body-bg);
}

body.gretchen {
    background: #3d3a44;
}

#bg-toggle {
    background: #fff;
    bottom: 0;
    display: none;
    left: 0;
    line-height: 30px;
    padding: 10px;
    position: fixed;
    text-align: center;
    z-index: 9999;
}

.people #bg-toggle {
    display: block;
}

#bg-toggle h2 {
    color: #af0000;
}

#bg-toggle li {
    padding-top: 5px;
}

#bg-toggle a {
    color: #000;
    font-size: 14px;
    text-decoration: underline;
}

#bg-toggle a:hover, #bg-toggle a:focus {
    color: #af0000;
}

#bg-toggle a.active {
    color: green;
    font-weight: 700;
}

a:link {
    color: var(--color-red);
    text-decoration: none;
}

a:visited {
    color: var(--color-red);
    text-decoration: none;
}

a:hover {
    color: var(--color-text-white);
    text-decoration: none;
}

a:active {
    color: var(--color-text-white);
    text-decoration: none;
}

#wrapper {
    background: var(--color-wrapper-bg);
    height: auto;
    min-height: 372px;
    height: auto !important;
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

#wrapper.portfolio {
    background: var(--color-portfolio-bg);
    width: 960px;
}

#wrapper.people {
    width: 924px;
}

.people2 #wrapper {
    width: 847px;
}

#header {
    margin: 0 auto;
    padding: 43px 0 0 0;
    width: 960px;
}

#header h1 {
    margin: 0 auto;
    width: 240px;
}

#logo {
    display: block;
    text-indent: -9999em;
    width: 100%;
}

#holiday-link {
    color: var(--color-text-white);
    padding-top: 30px;
    text-align: center;
}

#holiday-link a {
    font-family: var(--font-regular);
    text-decoration: underline;
}

#logo img {
    display: block;
    width: 100%;
}

/* ------ Navigation ------ */

#nav {
    overflow: hidden;
    padding-bottom: 12px;
    width: 100%;
}

#nav a {
    color: var(--color-text-white);
    font-family: var(--font-black);
    letter-spacing: 2px;
}

#nav a:hover, #nav a:focus {
    color: var(--color-red-nav);
    outline: none;
}

#nav a.active {
    color: var(--color-red-nav);
}

#nav ul {
    display: inline-block;
}

#nav .topnav {
    float: left;
    margin: 39px 65px 0 0;
    position: relative;
}

#nav .topnav.mobile {
    display: none;
}

#nav .topnav a {
    font-size: 12px;
    letter-spacing: 2px;
}

#nav .topnav.last {
    margin-right: 0;
}

#nav .subnav {
    left: -235px;
    padding: 3px 0 30px 0;
    position: absolute;
    top: 18px;
    width: 960px;
}

#nav .subnav li {
    float: left;
    padding: 0 45px 0 0;
}

#nav .subnav .last {
    padding-right: 0;
}

#nav #nav_work {
    cursor: pointer;
}

/* ------ Home ------ */

#home-video {
    height: 539px;
    margin-bottom: 40px;
    width: 960px;
}

#home-mobile-video {
    display: none;
}

#home {
    padding-top: 20px;
}

#home h2 {
    color: #000;
    font-family: var(--font-light);
    font-size: 22px;
    line-height: 30px;
    margin: 0 auto;
    width: 910px;
}

#home a {
    border-bottom: 2px dotted var(--color-red-orange);
    color: var(--color-red-orange);
    padding-bottom: 1px;
}

#home a:hover, #home a:focus {
    border-bottom: 2px dotted var(--color-text-white);
    color: var(--color-text-white);
}

.item h6 {
    color: var(--color-text-dark);
    font-family: var(--font-regular);
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
}

/* ------ Our People ------ */

#people {
    margin-bottom: 89px;
    overflow: hidden;
    position: relative;
    width: 924px;
}

.people2 #people {
    width: 847px;
}

#overlay {
    background: url('../images/bg_overlay.png');
    display: none;
    height: 623px;
    position: absolute;
    top: 0;
    width: 924px;
    z-index: 2;
}

.row {
    height: 89px;
    width: 924px;
}

.person {
    background: #fff;
    cursor: pointer;
    display: block;
    float: left;
    height: 89px;
    position: relative;
    width: 77px;
    z-index: 1;
}

.bulldog {
    background: #fff;
    float: left;
    height: 89px;
    position: relative;
    width: 77px;
    z-index: 1;
}

.img {
    background: #ccc;
    height: 89px;
    position: relative;
    width: 77px;
    z-index: 50;
}

.img img {
    position: relative;
    z-index: 50;
}

.details {
    background: url('../images/bg_details.png');
    color: var(--color-text-white);
    display: none;
    overflow: hidden;
    position: absolute;
    text-align: left;
    top: 0;
    width: 0;
    z-index: 75;
}

.info {
    padding: 10px 15px 0 90px;
}

.info h4 {
    color: var(--color-text-white);
    font-family: var(--font-bold);
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.info h5 {
    color: var(--color-red-dark);
    font-family: var(--font-black);
    font-size: 11px;
    letter-spacing: 2px;
    padding: 3px 0 0 0;
    text-transform: uppercase;
}

.info p {
    color: var(--color-text-white);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 18px;
    padding: 9px 0 0 0;
}

.info a {
    color: var(--color-text-white);
    text-decoration: underline;
}

.info a:hover, .info a:focus {
    color: var(--color-red-dark);
}

.increasespacing {
    background: none;
    letter-spacing: .1em;
}

#read {
    background: #fff;
    color: #000;
    font-family: Arial, sans-serif;
    margin: 0 auto;
    padding: 30px;
    text-align: left;
    width: 75%;
}

#read h4 {
    font-weight: bold;
    text-transform: uppercase;
}

#read h5 {
    font-style: italic;
    font-weight: normal;
    text-transform: uppercase;
}

#read p {
    margin-bottom: 50px;
}

#read a {
    color: #000;
    text-decoration: underline;
}

/* ------ About Us ------ */

#about {
    padding: 10px 40px 0 20px;
}

#about p {
    color: #535353;
    font-family: var(--font-light);
    font-size: 21px;
    line-height: 44px;
}

#about .white {
    color: var(--color-text-white);
    font-family: var(--font-bold);
}

/* ------ Contact ------ */

#contact_info {
    line-height: .9em;
    margin: 0 0 20px 20px;
    padding: 10px 0 20px 0;
    width: 920px;
}

#contact_title {
    text-align: right;
    width: 280px;
}

#contact_info .location {
    border-bottom: 1px solid #58595b;
    margin-left: 76px;
    margin-right: 76px;
    margin-top: 45px;
    padding-bottom: 45px;
    text-align: center;
}

#contact_info .location .address {
    font-size: 14px;
    line-height: 22px;
    padding-top: 20px;
}

#contact_info .location .address-left {
    float: left;
    margin-left: 125px;
    width: 260px;
}

#contact_info .location .address-right {
    float: left;
    width: 260px;
}

#contact_info .location .phone {
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 22px;
    padding-top: 20px;
    text-transform: uppercase;
}

#contact_info h5 {
    color: var(--color-text-dark);
    font-family: var(--font-bold);
    font-size: 18px;
    letter-spacing: 3px;
    padding: 20px 0 0 0;
    text-transform: uppercase;
}

#contact_info p {
    color: var(--color-text-dark);
    font-family: var(--font-light);
    font-size: 12px;
    letter-spacing: 1px;
}

.directions {
    margin-bottom: 10px;
    margin-top: 30px;
}

.directions a {
    border: 1px solid #bf5446;
    padding: 10px 18px;
    text-decoration: none;
    text-transform: uppercase;
}

.directions a:hover {
    border: 1px solid var(--color-text-dark);
    padding: 10px 18px;
    text-decoration: none;
    text-transform: uppercase;
}

#contact_info a {
    color: var(--color-red-dark);
    font-family: var(--font-bold);
    font-size: 12px;
    letter-spacing: 2px;
}

#contact_info a:hover, #contact_info a:focus {
    color: var(--color-text-dark);
}

#buttons {
    margin-top: 45px;
    padding-bottom: 90px;
}

#buttons #inquiries a {
    background-image: url('../images/button-inquiries.jpg');
    float: left;
    height: 49px;
    margin-bottom: 25px;
    margin-right: 100px;
    width: 197px;
}

#buttons #inquiries a:hover {
    background-image: url('../images/button-inquiries-hover.jpg');
    float: left;
    height: 49px;
    margin-right: 100px;
    width: 197px;
}

#buttons #jobs a {
    background-image: url('../images/button-jobs.jpg');
    display: block;
    height: 49px;
    margin: 0 auto;
    width: 197px;
}

#buttons #jobs a:hover {
    background-image: url('../images/button-jobs-hover.jpg');
    height: 49px;
    width: 197px;
}

#contact_map {
    background: url('../images/contact_map.jpg') no-repeat top left;
    float: right;
    height: 385px;
    margin: 80px 80px 10px 20px;
    width: 442px;
}

#contact_mapcopy {
    margin: 20px 0 0 300px;
}

#contact_mapcopy p {
    font-size: 11px;
}

/* ------ Careers ------ */

#careers {
    padding: 20px;
}

#careers_info {
    float: left;
    margin: 20px 0 20px 20px;
    padding: 10px 0 0 0;
    text-align: left;
    width: 345px;
}

.careers_column {
    margin: 0 20px 20px 20px;
    padding: 0;
    text-align: left;
    width: 345px;
}

.careers_column.right {
    text-align: right;
}

#careers h3 {
    color: #000;
    font-family: var(--font-bold);
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

#careers h4 {
    color: var(--color-text-white);
    font-family: var(--font-bold);
    font-size: 21px;
    letter-spacing: 1px;
}

#careers #job_posting h4 {
    padding-left: 0;
}

#careers h5 {
    color: #000;
    font-family: var(--font-black-condensed);
    font-size: 12px;
    letter-spacing: 2px;
    padding: 30px 0 0 0;
    text-transform: uppercase;
}

#careers p {
    color: var(--color-text-dark);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 18px;
    padding: 5px 0 0 0;
}

#careers p.listing {
    padding-top: 10px;
}

#careers #job_posting p {
    padding-top: 15px;
}

#careers ul {
    padding: 10px 0 0 0;
}

#careers ul ul {
    padding: 0 0 10px 0;
}

#careers ul ul.last {
    padding-bottom: 0;
}

#careers ul ul.dash {
    padding-bottom: 0;
}

#careers ul ul.dash li {
    list-style-type: none;
    margin-left: 0;
}

#careers li {
    color: var(--color-text-dark);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 18px;
    list-style: disc outside;
    margin-left: 15px;
    padding: 3px 0 0 0;
}

#careers a {
    color: var(--color-red-dark);
    font-family: var(--font-bold);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#careers a:hover, #careers a:focus {
    color: var(--color-text-dark);
}

#careers p#apply {
    margin: 20px 0;
}

#careers strong {
    font-family: var(--font-bold);
}

#thanks {
    display: none;
}

/* ------ New Work ------ */

#ie {
    display: none;
}

#latest {
    padding: 0 0 15px 15px;
    width: 100%;
}

#latest .column {
    float: left;
    margin: 0 15px 0 0;
    width: 300px;
}

#latest .item {
    cursor: pointer;
    float: left;
    margin: 15px 0 0 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#latest .item.intro {
    cursor: default;
}

#latest .item#intro {
    background: #c05447;
    cursor: default;
}

#latest #intro h2 {
    border-top: 1px solid #cdc7bb;
    color: #fdfaf1;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 54px;
    margin: 42px 22px 30px 20px;
    padding-top: 15px;
}

#latest #intro img {
    width: 100%;
}

#latest .item.spacer {
    padding: 80px 0;
}

#latest .item.spacer2 {
    padding: 210px 0;
}

#latest .item .thumb {
    height: auto;
    position: relative;
    top: 0%;
    width: 100%;
    z-index: 5;
}

#latest .item .thumb img {
    display: block;
    width: 100%;
}

#latest .video {
    display: none;
    height: 100%;
    position: absolute;
    top: 0%;
    width: 100%;
    z-index: 50;
}

#latest .video .player {
    height: 100%;
    width: 100%;
}

#latest .project {
    background: url('../images/bg_transparent.png') repeat top left;
    border: 1px solid #5a5a5a;
    box-sizing: content-box;
    cursor: default;
    display: block;
    height: 100%;
    position: absolute;
    top: 100%;
    transition: top 300ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 298px;
    z-index: 100;
}

#latest .item:hover .project,
#latest .item:focus-within .project {
    top: 0%;
}

#latest .item.dismissed .project {
    top: 100%;
}

#latest .project .fancybox {
    background: url('../images/icon_plus.png') no-repeat top left;
    display: block;
    height: 40px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 40px;
}

#latest .project .fancybox:hover, #latest .project .fancybox:focus {
    background: url('../images/icon_plus.png') no-repeat bottom left;
}

#latest .project .play, #latest .project .play2 {
    background: url('../images/icon_play.png') no-repeat top left;
    display: block;
    height: 40px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 40px;
}

#latest .project .play3 {
    top: 48px;
}

#latest .project .play4 {
    top: 92px;
}

#latest .project .play:hover, #latest .project .play:focus, #latest .project .play2:hover, #latest .project .play2:focus {
    background: url('../images/icon_play.png') no-repeat bottom left;
}

#latest .project h4 {
    color: var(--color-text-white);
    font-family: var(--font-bold);
    font-size: 16px;
    line-height: 18px;
    margin: 18px 68px 0 24px;
}

#latest .project h5 {
    color: var(--color-text-white);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 16px;
    margin: 0 68px 0 24px;
}

#latest .project p {
    color: var(--color-text-white);
    font-family: var(--font-regular);
    font-size: 12px;
    line-height: 15px;
    margin: 10px 24px 0 24px;
}

#latest .project p.no-margin {
    margin-top: 0;
}

#latest .project .award {
    color: #a1a1a1;
}

#latest .project p a {
    display: block;
    margin-top: 10px;
    text-decoration: none;
}

#latest .project a:hover, #latest .project a:focus {
    color: var(--color-red-orange);
}

.playButton {
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}

/* ------ Holiday ------ */

#wrapper.holiday, .holiday-inc #wrapper {
    background: none;
    margin-top: 30px;
}

#wrapper.holiday iframe, .holiday-inc iframe {
    background: #000;
    height: 540px;
    width: 100%;
}

/* ------ Vimeo Embed (Holiday) ------ */

.vimeo-embed {
    padding: 56.25% 0 0 0;
    position: relative;
}

.vimeo-iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* ------ Lightbox ------ */

.lightbox-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 10000;
}

.lightbox-overlay[hidden] { display: none; }

.lightbox-content {
    max-height: 90vh;
    max-width: 90vw;
    position: relative;
}

.lightbox-image {
    max-height: 85vh;
    max-width: 85vw;
    object-fit: contain;
}

.lightbox-iframe {
    aspect-ratio: 16 / 9;
    background: #000;
    border: none;
    display: block;
    height: auto;
    max-height: 90vh;
    max-width: 90vw;
    width: min(640px, 90vw);
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    padding: 8px 16px;
    position: absolute;
    z-index: 10001;
}

.lightbox-close { right: -48px; top: -8px; }
.lightbox-prev { left: -48px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -48px; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-prev:hover, .lightbox-prev:focus-visible,
.lightbox-next:hover, .lightbox-next:focus-visible {
    color: var(--color-red-nav);
}

/* ------ Classes ------ */

.bold {
    font-family: var(--font-bold);
    font-weight: bold;
}

.red {
    color: var(--color-red-burnt);
}

.center {
    text-align: center;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.hidden {
    display: none;
}

.italic {
    font-style: italic;
}

.right {
    float: right;
}

.mobile {
    display: none;
}

.mobile-show {
    display: none;
}

iframe { max-width: 100%; }

.galleryplayer {
    height: 100%;
    width: 100%;
}

.fancybox {
    overflow: hidden;
}

.corra {
    background: url("../images/latest/corra.png") no-repeat;
    bottom: 4px;
    display: block;
    float: right;
    height: 25px;
    position: absolute;
    right: 4px;
    width: 80px;
}

.corra a {
    display: block;
    height: 25px;
}

em {
    font-style: italic;
}

/* ------ Mobile ------ */

@media only screen and (min-width: 0px) and (max-width: 959px) {

    * {
        font-size: 12px;
        line-height: 15px;
        word-wrap: break-word;
    }

    body {
        padding-bottom: 20px;
        width: 100%;
    }

    #wrapper {
        margin: 0 auto;
        width: 360px;
    }

    #wrapper.home {
        width: 300px;
    }

    #header {
        margin: 0 auto;
        padding: 20px 0 0 0;
        width: 95%;
    }

    #header h1 {
        width: 250px;
    }

    #wrapper {
        background: none;
    }

    .contact #wrapper {
        width: 360px;
    }

    #wrapper.portfolio {
        margin-bottom: 0;
        width: 330px;
    }

    #logo {
        width: 100%;
    }

    #holiday-link {
        padding-top: 50px;
    }

    iframe {
        height: 200px;
        width: 100%;
    }

    #nav .topnav {
        margin-right: 29px;
    }

    #nav .topnav a {
        font-size: 12px;
    }

    #nav .topnav li {
        float: none;
        width: 100%;
    }

    #nav .topnav.mobile {
        display: block;
    }

    #wrapper.home {
        /*background: url('../images/video-home-mobile.png') no-repeat top left;*/
        background: var(--color-wrapper-bg);
        box-sizing: content-box;
        padding: 0 30px 30px 30px;
    }

    #home-video {
        display: none;
    }

    #home-mobile-video {
        display: block;
        height: 168px;
        margin-bottom: 20px;
        width: 300px;
    }

    #home h2 {
        font-size: 20px;
        width: 100%;
    }

    #about {
        padding: 20px;
    }

    #about, #contact, #careers {
        background: #CCCAC2;
    }

    #about p, #careers p, #careers li {
        font-size: 100%;
        line-height: 180%;
        padding-bottom: 5px;
    }

    #careers h4 {
        line-height: 100%;
    }

    #careers a, #contact a {
        font-size: 80%;
    }

    #careers p.listing {
        line-height: 100%;
    }

    #contact h5, #careers h5 {
        font-size: 100%;
        text-align: left;
    }

    #contact_info {
        margin: 0 20px 20px 20px;
        width: 320px;
    }

    #contact_info .city {
        width: 260px;
    }

    #contact_info a:hover, #careers a:hover, #about a:hover {
        color: var(--color-red-dark);
    }

    #contact p {
        font-size: 100%;
        padding-bottom: 5px;
        text-align: left;
    }

    .mobile {
        display: block;
    }

    .mobile-show {
        display: block;
    }

    .nomobile {
        display: none;
    }

    .mobile p {
        color: #999999;
        line-height: 150%;
        padding: 0 15px 15px 15px;
        text-align: center;
    }

    #contact_map {
        background: url('../images/contact_map2.jpg') no-repeat top left;
        float: right;
        height: 218px;
        margin: 20px 20px 10px 0;
        width: 250px;
    }

    #contact_mapcopy {
        float: right;
        margin: 0 20px 20px 20px;
        width: 250px;
    }

    #contact_mapcopy p {
        font-size: 12px;
    }

    #latest {
        padding: 30px 0 0 0;
    }

    #latest .item {
        margin: 0 0 15px 0;
    }

    #latest .item.last {
        margin: 0;
    }

    #latest .column {
        float: none;
        margin: 0 auto;
        width: 300px;
    }

    #latest .video {
        background: #000;
    }

    #wrapper.holiday, .holiday-inc #wrapper {
        width: 95%;
    }

    #wrapper.holiday iframe, .holiday-inc iframe {
        background: none;
        height: 200px;
        width: 100%;
    }

    #contact_info .location {
        border-bottom: 1px solid #58595b;
        margin-left: 0;
        margin-right: 0;
        margin-top: 45px;
        padding-bottom: 45px;
        text-align: center;
    }

    #contact_info .location .address {
        font-size: 14px;
        line-height: 22px;
        padding-top: 20px;
    }

    #contact_info .location .phone {
        font-size: 12px;
        line-height: 22px;
        padding-top: 20px;
        text-transform: uppercase;
    }

    #contact_info .location .address-left, #contact_info .location .address-right {
        float: none;
        margin: 0;
        width: auto;
    }

    #contact_info h5 {
        color: var(--color-text-dark);
        font-family: var(--font-bold);
        font-size: 18px;
        letter-spacing: 3px;
        line-height: 22px;
        padding: 20px 0 0 0;
        text-align: center;
        text-transform: uppercase;
    }

    #contact_info p {
        color: var(--color-text-dark);
        font-family: var(--font-light);
        font-size: 12px;
        letter-spacing: 1px;
        text-align: center;
    }

    #buttons {
        margin-top: 45px;
        padding-bottom: 90px;
    }

    #wrapper.people {
        background: #CCCAC2;
        width: 360px;
    }

    #people {
        background: none;
        height: auto;
        padding-top: 20px;
        width: 360px;
    }

    .person {
        background: none;
        border-bottom: 2px solid var(--color-body-bg);
        cursor: auto;
        float: none;
        height: auto;
        margin-bottom: 20px;
        pointer-events: none;
        width: 100%;
    }

    .person.last {
        border: none;
        margin-bottom: 0;
    }

    .bulldog {
        display: none;
    }

    .img {
        background: none;
        height: auto;
        text-align: center;
        width: 100%;
    }

    .img img {
        display: inline-block;
        margin: 0;
    }

    .details {
        background: none;
        color: #000;
        display: block;
        position: relative;
        text-align: center;
        width: auto;
        z-index: auto;
    }

    .details .info {
        padding: 20px;
    }

    .details .info h4 {
        color: var(--color-text-dark);
        font-family: var(--font-bold);
        font-size: 18px;
        line-height: 22px;
    }

    .details .info h5 {
        color: var(--color-red-dark);
        font-family: var(--font-bold);
        font-size: 14px;
        line-height: 22px;
    }

    .details .info p {
        color: var(--color-text-dark);
        font-family: var(--font-light);
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }

    .details .info p br {
        display: none;
    }

    .details .info {
        pointer-events: auto;
    }

    .info a {
        color: var(--color-red-dark);
    }

    .info a:hover, .info a:focus {
        color: var(--color-text-dark);
    }

    .img::after {
        clear: both;
    }

    .nyc-actual-size {
        height: 572px;
        width: 890px;
    }

    .nyc-actual-size-small {
        height: 321px;
        width: 500px;
    }

}

/* ============================================
   PEOPLE GRID VIEW (Dev Mode Only)
   Standalone styles for #people-grid-container
   Generated dynamically via JS - no conflicts
   with existing .person/.img/.details styles
   Uses flexbox for equal-height cards
   ============================================ */

#people-grid-container {
    background: var(--color-body-bg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1400px;
    min-height: 100vh;
    padding: 20px 20px 150px 20px;
}

.pgrid-card {
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    margin: 8px;
    padding: 15px;
    text-align: center;
    width: 200px;
}

.pgrid-card img {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 77px;
}

.pgrid-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-top: 10px;
}

.pgrid-name {
    color: #333;
    font-family: var(--font-bold);
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 18px;
    text-transform: uppercase;
}

.pgrid-title {
    color: var(--color-red-dark);
    font-family: var(--font-regular);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 17px;
    margin-top: 5px;
    text-transform: uppercase;
}

.pgrid-bio {
    color: #555;
    flex-grow: 1;
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: 18px;
    margin-top: 10px;
    text-align: left;
}

.pgrid-bio a {
    color: var(--color-red-dark);
    text-decoration: underline;
}

.pgrid-bio a:hover {
    color: #333;
}

/* END PEOPLE GRID VIEW */

/* ============================================
   PRINT STYLES
   Hide dev controls, optimize for printing
   ============================================ */

@media print {
    #bg-toggle {
        display: none !important;
    }

    body {
        margin: 0;
        padding: 0;
    }

    #people-grid-container {
        background: #fff;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }

    .pgrid-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        margin: 4px;
        padding: 8px;
        page-break-inside: avoid;
        width: 180px;
    }

    .pgrid-bio {
        color: #333;
    }
}

/* END PRINT STYLES */

@media only screen and (max-width: 390px) {
    #header h1 {
        width: 95%;
    }
    #nav {
        padding: 15px 0;
    }
    #nav .topnav {
        float: none;
        margin: 20px 0 0 0;
    }
    #wrapper, #wrapper.home, #wrapper.people, .contact #wrapper {
        box-sizing: border-box;
        padding: 15px;
        width: 100%;
    }
    #latest {
        padding: 0;
    }
    #latest .column {
        float: none;
        width: 100%;
    }
    #latest .item {
        margin: 15px 0 0 0;
    }
    #latest .item:first-child {
        margin: 0;
    }
    #latest .project {
        box-sizing: border-box;
        width: 100%;
    }
    #latest .project h4 {
        font-size: 13px;
        margin: 10px 50px 0 10px;
    }
    #latest .project h5 {
        font-size: 11px;
        margin-left: 10px;
        margin-right: 50px;
    }
    #latest .project p {
        font-size: 11px;
        margin-left: 10px;
        margin-right: 50px;
    }
    #people {
        width: 100%;
    }
    #contact_info {
        margin: 0;
        width: 100%;
    }
    #contact_info .location {
        margin: 0;
        padding: 0 15px 15px 15px;
    }
    #buttons #jobs {
        padding: 0 10px;
    }
    #buttons #jobs a,
    #buttons #jobs a:hover {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        max-width: 197px;
        width: 100%;
    }
}

/* ------ Reduced Motion ------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}