html {
        scroll-behavior: initial;
    }

    html,
    body {
        width: 100%;
        min-height: 100%;
        height: auto;
    }

    :root {
        --font-heading: "Helvetica";
        --font-paragraph: 'Roboto', sans-serif;
    }

    html {
        font-family: var(--font-paragraph);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-heading);
        font-weight: bold;
        letter-spacing: -0.05em;
    }

    img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
    }

    .award-img {
        filter: invert();
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .photo-cms-meta-title h2 {
        white-space: nowrap;
    }

    ::selection {
        background: #8888881f;
    }

    [text-split] {
        opacity: 0;
    }

    html.w-editor [text-split] {
        opacity: 1;
    }

    .word {
        overflow: hidden;
        padding-bottom: 0.1em;
        margin-bottom: -0.1em;
        transform-origin: bottom;
    }

    /* Hide transition only in Webflow */
    html.wf-design-mode .page-transition {
        pointer-events: none;
        display: none;
    }

    /* Parent's text color */
    a,
    a:focus,
    .w-nav-link,
    .w-nav-brand,
    .w-nav-button.w--open {
        color: currentcolor;
    }

    /* These elements are invisible to the cursor */
    .grain,
    .video-card-overlay,
    .polaroid-photo-shadow,
    .transition,
    .video-card-gradient,
    .vimeo-video,
    .photo-cms-gradient {
        pointer-events: none;
    }

    /* Parent's text and border color */
    .button,
    .article-row,
    .form-field {
        border-color: currentcolor;
        color: currentColor;
    }

    /* Parent's border color */
    .photo-case-anchor-link.w--current,
    .photo-case-anchor-link:hover {
        z-index: 9 !important;
        transform: perspective(1200px) translate3d(0px, 0px, 32px) !important;
        border-color: currentColor;
    }

    .site-logo-text {
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: -0.05em;
        font-size: 2.5rem;
        font-weight: bold;
        color: currentColor;
        white-space: nowrap;
        text-decoration: none;
    }

    .subheader {
        font-size: 2rem;
        font-weight: 400;
        color: #a79f9f;
        margin-top: 0.25rem;
    }

    .about-logo-wrapper {
        --x-px: calc(var(--x) * 1px);
        --y-px: calc(var(--y) * 1px);
    }

    .about-logo-wrapper:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        background: radial-gradient(600px circle at var(--x-px) var(--y-px), rgba(255, 255, 255, 0.14), transparent 40%);
    }

    .about-logo-wrapper:after {
        opacity: 0;
        z-index: 2;
        transition: opacity 0.4s ease;
    }

    .about-logo-wrapper:hover:after {
        opacity: 1;
    }

    .about-logo-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        /* optional: remove the default img display gap */
        display: block;
        filter: invert(100%);
    }

    .about-image-wrapper {
        border-radius: 60%;
        width: clamp(200px, 30vw, 400px);
    }

    .about-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        /* you can also round here directly, instead of on the wrapper: */
        /* border-radius: 16px; */
    }


    .photo-case-anchor-link.w--current .photo-case-anchor-overlay {
        opacity: 0;
    }

    .photo-case-anchor-link:hover .photo-case-anchor-overlay {
        opacity: 0;
    }

    /* Color palette hover effects */
    .photo-cms-meta-palette:hover .photo-cms-palette-color {
        opacity: 1;
    }

    .photo-cms-palette-color:hover .photo-card-palette-hex {
        opacity: 1;
    }

    /* Logo hover effects */
    .nav-logo:hover .nav-logo-svg.dot._1 {
        transform: translateY(-2px);
    }

    .nav-logo:hover .nav-logo-svg.dot._2 {
        transform: translateY(-4px);
    }

    /* Play button hover effect */
    .play-lightbox:hover .play-button-mask {
        width: 90px;
    }

    .page-paragraph {
        font-family: 'Times New Roman', Times, serif;

    }

    /* Responsive font size for desktop screens */
    @media screen and (min-width: 992px) {
        .headline {
            font-family: Helvetica, sans-serif;
            --minFontSize: 100px;
            --maxFontSize: 150px;
            --scaler: 13vw;
            font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
            letter-spacing: -0.05em;
            white-space: nowrap;
        }

        h1 {
            --minFontSize: 98px;
            --maxFontSize: 108px;
            --scaler: 10vw;
            font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
        }

        h2 {
            --minFontSize: 80px;
            --maxFontSize: 98px;
            --scaler: 8vw;
            font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
        }

        h3 {
            --minFontSize: 64px;
            --maxFontSize: 80px;
            --scaler: 6vw;
            font-size: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
        }

        .intro-image {
            --minFontSize: 64px;
            --maxFontSize: 80px;
            --scaler: 6vw;
            height: clamp(var(--minFontSize), var(--scaler), var(--maxFontSize));
        }
    }

    /* Button hover effect */
    .button:after {
        width: 100%;
        height: 100%;
        background: currentColor;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        margin-left: auto;
        margin-right: auto;
        opacity: 0;
        -webkit-transition: .6s cubic-bezier(.215, .61, .355, 1);
        transition: .6s cubic-bezier(.215, .61, .355, 1);
        pointer-events: none;
    }

    .button:hover:after {
        opacity: 0.12;
    }



    .footer-email:hover .footer-email-detail {
        margin-left: 8px;
        margin-right: 8px;
    }

    .about-divider,
    .about-logo-background,
    .video-role-divider {
        background: currentcolor;
    }

    .aperture-color {
        fill: currentcolor;
    }

    .light-background,
    .marquee-banner-divider {
        background: currentcolor;
        pointer-events: none;
    }

    .about-link-row {
        border-color: currentcolor;
    }

    .motion-cms-image-wrapper.main img.motion-cms-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* change these to focus on the part you want: */
        object-position: 50% 90%;
        /* x% y% (e.g. 50% horiz, 20% down) */
    }

    .about-prizes-background {
        pointer-events: none;
    }

    .header-wrapper h1 {
        margin-bottom: 0;
    }

    .section-title:only-child {
        margin-bottom: 0;
    }

    .photo-card-palette-hex.w-embed {
        background: inherit;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: sepia(5) saturate(200) invert(1) grayscale(1) contrast(12);
    }

    a.-wfp-focus,
    :where(html:not(.wf-design-mode)) a:focus {
        outline-color: currentColor;
    }

    .about-brand h4 {
        margin: 4px 8px;
    }

    .about-brand h4::after {
        content: "✦";
        font-size: 0.4em;
        margin-left: 1.2em;
        top: -0.5em;
        position: relative;
    }

    .about-brand h4:last-child::after {
        content: "";
        font-size: 0.4em;
        margin-left: 0;
    }

    .about-awards-background {
        background: currentcolor;
    }

    a.about-awards-row:hover .about-awards-h4 {
        transform: translateX(16px);
    }

    a.about-awards-row:hover .about-tags {
        transform: translateX(-16px);
    }

    a.about-awards-row:hover .about-awards-background {
        opacity: 0.08;
    }

    .grain-texture {
        animation: 2s steps(1) infinite noise;
    }

    @keyframes noise {

        0%,
        100% {
            background-position: 0 0;
        }

        10% {
            background-position: -5% -10%;
        }

        20% {
            background-position: -15% 5%;
        }

        30% {
            background-position: 7% -25%;
        }

        40% {
            background-position: 20% 25%;
        }

        50% {
            background-position: -25% 10%;
        }

        60% {
            background-position: 15% 5%;
        }

        70% {
            background-position: 0% 15%;
        }

        80% {
            background-position: 25% 35%;
        }

        90% {
            background-position: -10% 10%;
        }
    }

    .instalink:hover {
        background-size: 300% 100%;
        animation: instalink 4s linear infinite;
    }

    @keyframes instalink {
        0% {
            background-position: 0% 0%;
        }

        50% {
            background-position: 100% 0%;
        }

        100% {
            background-position: 0% 0%;
        }
    }

    .section-title:last-child,
    .section-title:only-child {
        margin-bottom: 0;
    }

    .footer-email-border {
        border-color: currentcolor;
    }

    a.about-awards-row:hover .about-divider {
        opacity: 0;
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar {
        width: 8px;
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: currentcolor;
        border-radius: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: currentcolor;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    .hide {
        display: none;
    }

    .w-lightbox-backdrop {
        backdrop-filter: blur(8px);
    }

    .w-lightbox-embed {
        border-radius: 16px;
    }

    .w-lightbox-close {
        right: 12px;
        height: 64px;
        width: 64px;
        background-size: 20px;
        background-color: black;
        border-radius: 50%;
        backdrop-filter: blur(8px);
    }

    .motion-cms-image-wrapper.main:hover .motion-cms-play-icon {
        transform: scale(1.1);
    }

    .motion-cms-image-wrapper.main:hover .motion-cms-play-icon.glow {
        filter: blur(12px);
        opacity: 1;
    }

    .motion-cms-image {
        width: calc(100% + 64px);
        height: calc(100% + 64px);
    }


    .come-and-say-hi:hover .footer-smile.o {
        display: none;
    }

    .come-and-say-hi:hover .footer-smile.happy {
        display: flex;
    }

    a {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    .w-nav-overlay {
        top: 0%;
    }

    header.header {
        position: relative;
        overflow: hidden;
    }

    header.header iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

@media screen and (max-width: 768px) {
  /* only the "Documentary" H1 in the about-section */
  .about-section .section-title > h1 {
    /* tweak these to taste */
    font-size: clamp(2.8rem, 12vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    white-space: normal;   /* allow wrapping */
  }
}