:root{
    --purple: #D3008A;
}

/* ===================== //ADAPT MONTRÉAL 2026 =========================
   This page used to be a run of fixed stages slid past each other by GSAP
   ScrollTrigger, over eighteen empty sections that existed only to give
   the scrub something to measure. It is an ordinary document now: the
   sections flow, the browser scrolls them, and the smoothing is the
   browser's own -- which costs nothing, does not fight the scrollbar, and
   is turned off for anyone who has asked for less motion.
   ==================================================================== */
html{ scroll-behavior: smooth; }

/* somebody who has asked their system for less movement gets none */
@media(prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* the masthead is the one thing that stays, so the page needs to start
   below it rather than underneath it */
#container{ padding-top: 0; }

/* The film used to be fixed to the viewport for the whole page, which on a
   phone is an autoplaying iframe repainting behind every scroll -- the most
   expensive thing on the page and the one nobody sees after the first
   screen. It sits behind the hero now and scrolls away with it. */
#video_wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

#video_wrapper::after{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
}

#mast_head{
    position: fixed;
    width: calc(100% - 80px);
    top: 40px; left: 40px; 
    z-index: 151;
    
}

/* 100vh was the height of a stage. A section is as tall as what is in it
   now, with a floor so a short one still reads as a screen of its own --
   svh rather than vh, because on a phone vh is the tallest the window ever
   gets and a section sized in it hides its own last line behind the bar. */
section{ width: 100%; position: relative; }
.page_block{ min-height: 70vh; min-height: 70svh; }

#container{
    position: relative;
    z-index: 2;
    width: 100%; 
}

.page_block{
    position: relative;
    width: 100%;
    overflow: hidden;
}

a{text-decoration: none;}

#video_wrapper iframe{
    position: absolute;
    top: 50%;
    left: 50%;

    /* 16:9 blown up until it covers its own box, so the hero never shows a
       letterbox whatever shape the screen is */
    width: 100%;
    height: 56.25vw;

    min-width: 177.78vh;
    min-height: 100%;

    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

body{
    /* height: 100vh; overflow: hidden;  */
}

/* adapt-main gives every page 60px of room for the masthead and 3em of
   air under the content. This page's masthead floats over the film and
   its last section runs to the bottom edge, so both go -- the 3em left a
   strip of the wrapper's own grey below the contact block. */
#mainwrapper{
    padding-top: 0; 
    padding-bottom: 0;
    overflow: hidden;
    min-height: 100vh;
    
}

.tile_grid{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;


    background: url(../images/backgrounds/dot-grid.svg) repeat;

    background-size: 20px 20px;
    opacity: 0.2;
}

.block{
    display: block;
    width: 100%;
    position: relative;
}

.block > .padding{
    min-height: calc(100vh - 140px);
    padding: 100px 40px 40px 100px; 
    
}

h1, .dark h1{
    color: white;
    font-size: 24px; 
    text-transform: uppercase;
    transition-duration: 0.5s;
}

#mast_head h1, #mast_head h1 span.thin, #mast_head a{color: var(--light-grey);}

#mast_head.dark h1, #mast_head.dark h1 span.thin, #mast_head.dark a{color: var(--text-color);}

#mast_head.dark .line_wrapper .line, #mast_head.dark .bars .bar{background: var(--text-color);}

h1 span.thin{
    color: white;
    font-family: SwissLight;
}

h1 span.purple{
    color: var(--purple);
    
}

.grid_1_1{
    gap: 2em; 
}

.line_wrapper{
    display: block;
    height: 8px; 
    transform: translateY(-8px);
}

.line_wrapper.long_line{
    width: 100%;
    
}

.line_wrapper .line{
    width: 100%; 
    height: 1px; 
    background: white; 

    
}

.line_wrapper.long_line .line{
    width: 100%; 

    transform-origin: left center;
    animation: adaptLine 1s linear infinite;
}

#a2026_header{align-items:flex-start;}

#a2026_header > div{
    /* GSAP used to reveal this; without it the content never appeared */
    opacity: 1;
}

.line_wrapper.short_line{
    width: 20px; 
}

.bars{
    height: 20px; 
    display: block; 
    transform: skew(-30deg) translateY(-10px);


}

.bars .bar{
    width: 2px; height: 100%; margin-left: 2px; 
    display: inline-block; 
    background: white; 
    transition-duration: 0.25s;
    position: relative;
}

.bars .bar::after{
    content: '';
    width: 10px; height: 100%; 
    position: absolute; 
    top: 0; left: -5px; 
}

.bars .bar:hover{
    transform: rotate(-60deg);
}

#cover_page{
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; 
    height: 100vh;
    background: var(--dark-grey);
    z-index: 101;
    opacity: 1;
    transition-duration: 1s;
}

#cover_page.open{
    top: -100vh;
}

#cover_page .cover_content{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    max-width: 620px;
}


.cover_content img{
    max-width: 220px;
}

.cover_content p{text-align: center;}

.square_button{
    text-decoration: none;
    color: white;
    border: 1px solid white;
    padding: 5px 20px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1em;
    border-radius: 0;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0.1em 0.4em;
    position: relative;
    overflow: hidden; /* important */
    z-index: 1;
}

.page_block .square_button{
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.square_button::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: white;
    transition: width 0.25s ease;
    z-index: -1; /* behind the text */
}

.square_button:hover::before{
    width: 100%;
}

.square_button:hover{
    color: var(--text-color);
}   


.dark.page_block .square_button{
    border: 1px solid white;
    color: white;
}

.dark.page_block .square_button:hover{color: var(--text-color);}

.lang_select_button{
    position: absolute;
    top: 20px; right: 20px; 
    text-align: right; 
}

.square_button.purple, .dark .square_button.purple{
    background: var(--purple);
    border: 1px solid var(--purple);
    color: white;
}

.top_lines{
    animation: flashLines 7s infinite;
}

#page_1{
    /* was position: fixed. Every section on this page used to be a fixed
       stage parked off-screen, slid in and out by ScrollTrigger against a
       run of empty spacer sections. The page is an ordinary document now:
       the sections flow, the browser scrolls them, and nothing is pinned. */
    position: relative;
}

#page_1 .padding{
    display: flex;
    align-items: center;
}

@media(max-width: 640px){
    #page_1 .padding{
        padding: 70px 20px 60px 60px;
    }
}

.radio_field{
    max-width: 600px;
    padding: 10px; 
    border-radius: 10px; 
    background: var(--light-grey);
}

.radio_field p{padding: 0; margin: 0; line-height: 1em;}

.radio_field .flex_in_between{gap: 10px;}

.radio_field .flex_in_between > div{
    border: 1px solid var(--text-color);
    border-radius: 7px; 
    padding: 5px 15px; 
    cursor: pointer;
}

.radio_field .flex_in_between > div:hover, .radio_field .flex_in_between > div.active{
    background: var(--text-color);
}

#form_panel .radio_field .flex_in_between > div:hover p, #form_panel .radio_field .flex_in_between > div.active p{color: white;}

#page_1 .textwrapper h2{
    font-size: 80px;
    padding: 0; line-height: 1em;
    
}

.grid img{width: 100%;}

@media(max-width: 699px){
    #mast_head .flex_in_between{
        display: grid;
    }

    #mast_head .flex_in_between > div:nth-child(2){
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #mast_head .flex_in_between > div:nth-child(3){
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #mast_head .flex_in_between > div:nth-child(4){
        grid-column: 2/2;
        grid-row: 1/2;
        display: none;
    }

    .top_lines > div:nth-child(2){display: none;}

}

@media(min-width: 700px){
    #page_1 .textwrapper{
        width: 50%; 
    }
}

#page_1 .textwrapper h1{
    font-size: 160px;
    margin-left: 10%;
    padding: 0; line-height: 0.9em;
}

#page_1 .textwrapper p{font-size: 16px; color: white;}

#page_1 .textwrapper h1, #page_1 .textwrapper h2, #page_1 .textwrapper p, #page_1 .textwrapper h3{ opacity: 1; }

@media(min-width: 600px){
   #page_1 .textwrapper h2{
        font-size: 15vh;
    } 

    #page_1 .textwrapper h1{
        font-size: 30vh;
    }

    #page_1 .textwrapper p{font-size: 16px;}

    .block > .padding{
       min-height: calc(100vh - 140px);
        padding: 100px 20px 40px 60px; 
        
    }
}

/* the hint belongs to the first screen, so it scrolls away with it rather
   than following the reader down a page they are already scrolling */
.scroll_bar{
    position: absolute;
    bottom: 20px; left: 20px;
    transform-origin: top left;
    transform: rotate(-90deg);
    z-index: 3;
}

.scroll_bar.dark{
    filter: invert(1);
}

.scroll_bar p{
    width: 300px; 
    position: relative;
    color: white;
    border-top: 1px solid white;


    animation: softBounce 3s ease-in-out infinite;
    
}

#page_2{
    position: relative;
    background: white;
}

#page_2 .grid_1_1, #page_3 .grid_1_1{
    align-items: center;
}



#page_2 h1, #page_2 h2, #page_2 h3, #page_2 p{color: var(--text-color); }

#page_2.block .padding, #page_3.block .padding, #page_2_2.block .padding{
    padding: 80px 40px 40px 40px;
}

/* the starting frame of a ScrollTrigger reveal: every line of this section
   waited at opacity 0 for a timeline that no longer runs, which left the
   section as nothing but its stripes */
#page_2_2 .content > *{
    transform: none;
    opacity: 1; 
}

@media(max-width: 1024px){
    #page_2 .grid_1_1{gap: 0; align-items: initial;}

    #page_2 p{font-size: 13px; }

    #page_2 h2{font-size: 18px;}

    #page_2.block .padding, #page_3.block .padding{
        padding: 80px 20px 20px 40px;
    }
}

#page_2 .triangle{
    width: 80%; aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: url(../images/a26/triangle.svg) no-repeat;
    background-size: contain; 
    background-position: center;
     animation: rotateTriangle 20s linear infinite;
}

#page_2_2{
    position: relative;
    background: white;
}

.dark #page_2_2 h1, .dark #page_2_2 h2, .dark #page_2_2 h3, .dark #page_2_2 h4, .dark #page_2_2 h5, .dark #page_2_2 p, .dark #page_2_2 ol, .dark #page_2_2 li {
    color: var(--text-color);
}

/* the skewed stripes are the section's own backdrop, so they take the
   section's height rather than a screen's -- a section shorter than the
   window used to leave 100vh of stripes hanging past its bottom edge */
#page_2_2 .background_wrapper{
    position: absolute; 
    top: 0;
    left: -10vw;
    width: 120vw;
    height: 100%;
    transform: skew(-20deg);
}

#page_2_2 .background_wrapper .stripe{
    position: absolute; 
    bottom: 0;
    width: 5%;
    height: 100%; 
    background: rgba(225, 225,225, 0.3);
}

#page_3{
    position: relative;
    background: var(--text-color);
    color: white;
}

section.space{z-index: -1;}

#page_3 img{width: 100%;  }

#form_panel, #contact_panel{
    position: fixed;
    top: 100vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 300;
    transition-duration: 1s;
}

#form_panel.active, #contact_panel.active{
    top: 0vh;
    opacity: 1;
}

#form_panel .form_padding{
    padding: 20px; 
}

#form_panel h1, #form_panel h2, #form_panel h3, #form_panel p, #form_panel label, #contact_panel h1, #contact_panel h2, #contact_panel h3, #contact_panel p, #contact_panel label{
    color: var(--text-color); 
}

.dark .form_field input[type=text], .dark .form_field input[type=email], .dark .form_field input[type=password], .dark .form_field input[type=number], .dark .form_field input[type=time], .dark .form_field input[type=date], .dark .form_field select {
    background: transparent;
    color: var(--dark-grey);
}

.dark .form_field textarea{
    background: transparent;
    color: var(--dark-grey);
}

.scroll_wrapper{
    width: 100%;
    height: 100vh; /* not 100% */
    overflow: hidden;
}

.scroll_wrapper .scroll_content{
    width: 100%;
    height: 100vh; /* not 100% */
    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.scroll_wrapper .scroll_content::-webkit-scrollbar{
    display: none;
}

#form_panel .close, #contact_panel .close{
    position: absolute; 
    top: 20px; right: 20px; 
    width: 30px; height: 30px; 
    cursor: pointer;
    transition-duration: 0.25s;
}

#form_panel .close:hover, #contact_panel .close:hover{
    transform: rotate(90deg);
}

#form_panel .close::before, #contact_panel .close::before{
    position: absolute; 
    top: 50%; left: 0;
    content: "";
    width: 100%; 
    border-top: 1px solid var(--text-color);
    transform: rotate(45deg);
}

#form_panel .close::after, #contact_panel .close::after{
    position: absolute; 
    top: 50%; left: 0;
    content: "";
    width: 100%; 
    border-top: 1px solid var(--text-color);
    transform: rotate(-45deg);
}

.checkbox_group{
    padding: 10px 0;
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.checkbox_group label{
    font-size: 12px; 
    position: relative;
    padding: 5px 0 0 40px;
    display: block; 
    pointer-events: auto !important;
}

.checkbox_group label > input{
    position: absolute; 
    left: 0px; top: -5px;
    z-index: 305;
    pointer-events: auto !important;
}

.form_message.error p{color: red!important;}

.block .center_page{
    position: relative;
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center;     /* Vertical */
}

.block .center_page > div{
    max-width: 640px;
    width: 100%; 
}

#page_4{
    position: relative;
    color: var(--text-color);
    background: var(--purple);
}



#page_5{
    position: relative;
    color: white;
    background: var(--text-color);
}

#page_4 h2{font-size: 2em;}

@media(max-width: 640px){
    #page_4 h2{
        font-size: 18px; 
    }

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

    #page_4 .padding{
        padding: 100px 20px 20px 60px;
    }



    /* #page_4 .padding .content_scroll{
        display: block; 
        position: relative;
        width: 100%; height: calc(100vh - 100px); 
        
        overflow-y: scroll;
    } */

    #page_4 .grid, #page_5 .grid{
        gap: 10px;
    }
}

#page_4 p, #page_4 h2, #page_4 h3{color: white;}

#page_4 p, #page_4 h2, #page_4 .grid{
    
}

.block_background{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-size: cover!important; 
    background-position: center!important;
    opacity: 0.5;
    
}

#page_5 .block_slats{
    position: absolute;
    top: 0; left: -20%;
    width: 140%; height: 100%; 
    overflow: hidden;
    transform: skew(-22deg);
}

#page_5 .block_slats .slat{
    width: calc(5% + 2px); height: 100%; 
    position: absolute;
    top: 0;
    background: var(--text-color);
    
}

#page_5 h1{
    font-size: 48px; padding: 0; margin: 0; line-height: 1em;
}

#page_6{
    position: relative;
    background: white;
    color: var(--text-color);
}

#page_6 p, #page_6 h2, #page_6 h3, #page_6 p{color: var(--text-color);}

#page_6 .grid_1_1_1_1{
    align-items: center;
}

/* The list of participants used to be a pane of its own: parked absolutely
   at the top of a stage that never moved, with its own scrollbar hidden,
   so a reader scrolled inside it while the page stayed still. On a page
   that scrolls, that pane is simply the section's content -- it takes its
   own height and the page carries it, instead of being cut off at the
   bottom of a screen by .page_block's overflow. */
#page_6 .participant_zone{
    width: 100%;
    position: relative;
    overflow: visible;
}

#page_6 .participant_zone::-webkit-scrollbar {
    display: none;
}

/* the partner logos and the guest list used to be two panes; run together
   in one column the last logo sat straight on top of the heading, so the
   list gets a clear 120px of its own above it */
#page_6 .participant_zone h2.participants_head{
    margin-top: 120px;
}

.participant_grid{
    display: grid; 
    grid-template-columns: 1fr;
    gap: 1em;
}

.participant_grid .cat_head{
    padding: 5px 0;
    border-top: 3px solid var(--text-color);
}

.participant_grid .cat_body{}



.participant_grid .cat_body.list .list_item{
    border-top: 1px solid var(--text-color);
    padding: 5px 0;
}


.participant_grid .profile_grid{
    display: grid; 
    gap: 10px; 
    grid-template-columns: 40px 1fr 20px;
}



.participant_grid .profile_grid .logo{
    width: calc(100% - 2px);
    aspect-ratio: 1/1;
    background: var(--text-color);
    border-radius: 50%;
    border: 1px solid var(25,25,25,0.25);
    background-size: cover!important;
    background-position: center!important;

    border: 1px solid rgba(25,25,25,0.3);
}

.participant_grid .profile_grid p{
    line-height: 1em;
    margin:0; padding: 0; 
    font-size: 15px; 
}

.participant_grid .profile_grid p.small{
    font-size: 13px; 
    opacity: 0.6;
}

@media(min-width: 1024px){
    .participant_grid{
        grid-template-columns: 1fr 1fr;
    }
}

@media(min-width: 1480px){
    .participant_grid{
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 1024px){
    #page_6 .grid_1_1_1_1{
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

#page_immersion{
    background: white;
    
    position: fixed; top: 0vh; 
    z-index: 111;
}
#page_immersion iframe{
    width: calc(100vw - 50px);
    height: calc(100vh - 50px);
    margin: 25px;

    
}

#page_immersion .credits{
    position: absolute; 
    bottom: 10px; 
    font-size: 14px; color: var(--text-color);
    left: 25px;
}

#page_immersion .credits a{
    color: var(--purple);
    text-decoration: underline;
}

@media(min-height: 600px){
    #page_immersion iframe{
        width: calc(100vw - 200px);
        height: calc(100vh - 200px);
        margin: 100px;
    }

    #page_immersion .credits{
        bottom: 50px;
        left: 100px;
    }
}

#page_7{
    position: relative;
    background: var(--text-color);
    color: var(--light-grey);
}

#page_7 h1, #page_7 h2, #page_7 h3, #page_7 p{
    color: var(--light-grey);
    
}

#page_7 .padding{padding: 10px; }

#page_7 .grid > div:nth-child(1){
        height: 50vh;
    }

@media(min-width: 640px){
    #page_7 > .grid{
        height: 100vh; 
    }

    #page_7 .grid > div:nth-child(1){
        height: initial;
        grid-column: 2/3;
        grid-row: 1/2;
    }

    #page_7 .grid > div:nth-child(2){
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #page_7 .padding{padding: 120px 30px 30px 60px; }
}

#page_7 .grid .background{
    
    position: relative;
    overflow: hidden;
}

/* the marquee fills its own half of the section rather than a screen's
   worth of height, so it still lines up when the section is shorter or
   taller than the window -- which it is on a phone */
#page_7 .grid .background .slide_track{
    width: 800%;
    height: 100%; 
    position: relative;

    animation: marquee-left 45s linear infinite;
}

#page_7 .grid .background .slide{
    position: absolute; 
    top: 0; left: 0;
    width: 16.666%; height: 100%;
    background-size: cover!important; 
    background-position: center!important; 
}

#page_immersion{
    position: absolute; 
    top: -100vh; 
    left: 0;
}


#contact_panel .grid#contact_form{
    gap: 0 1em;
}

#form_panel .form_padding input::placeholder, #contact_panel .form_padding input::placeholder, #contact_panel .form_padding textarea::placeholder{color: var(--light-grey);}

/* #page_5 .block_slats .slat:nth-child(odd){
    
} */

@media(min-width: 700px){
    #form_panel .form_padding, #contact_panel .form_padding{
        padding: 40px; 
    }
}


@keyframes adaptLine {

    /* First half: grow */
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }

    51%{
        transform: scaleX(0);
    }

    /* Pulse #1 */
    66% {
        transform: scaleX(1);
    }

    67% {
        transform: scaleX(0);
    }

   

    82% {
        transform: scaleX(1);
    }

    /* Pulse #3 */
    83% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes flashLines {

    /* Visible for first 0.5s (0.5 / 7 ≈ 7%) */
    0%, 30% {
        opacity: 1;
    }

    /* Hidden for the rest */
    30.01%, 100% {
        opacity: 0;
    }
}

@keyframes softBounce {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes rotateTriangle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes marquee-left {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

a.linkedin{
    background: url(../images/icons/icon-linked-in-blue.svg) no-repeat;
    display: inline-block; 
    width: 14px;
    aspect-ratio: 1 / 1;
    background-size: cover!important; 
    background-position: center!important; 
    transform: translateY(3px);
}

@media(max-width: 640px){
    h2{font-size: 20px;}

    h3{font-size: 16px;}

    p{font-size: 13px;}

    .participant_grid{width: calc(100vw - 60px);}

    .participant_zone .grid_1_1_1_1{
        grid-template-columns: 1fr 1fr;
        width: calc(100vw - 60px);
    }
}

/* ========================= SMALL SCREENS =============================
   The page was built for a desktop stage 100vh tall with 100px of padding
   down the left. On a phone that is a third of the screen spent on margin,
   and the header sat on top of the first line of every section.
   ==================================================================== */
@media(max-width: 760px){
    /* the masthead is the last thing in #container, after every section,
       so sticky pinned it to the bottom of the page and added its own
       height to the document. It stays fixed on a phone too, just tighter
       against the edges; a26HeaderInk() keeps it readable over whichever
       section is under it. */
    #mast_head{
        top: 14px; left: 16px;
        width: calc(100% - 32px);
    }

    /* the hero carries the film, so it keeps a screen's worth of height;
       every other section is as tall as its content */
    .page_block{ min-height: 0; }
    #page_1{ min-height: 82vh; min-height: 82svh; }

    /* 100px of left margin is a third of a phone. The top is deeper than
       the rest because the masthead floats over it. */
    .block > .padding,
    .page_block > .padding{ padding: 76px 18px 40px; min-height: 0; }

    /* a two-column grid is one column on a phone */
    .grid_1_1, .grid_1_1_1, .grid_1_2, .grid_2_1{ grid-template-columns: 1fr !important; }

    /* the rotated hint has nowhere to go on a narrow screen */
    .scroll_bar{ display: none; }

    /* the modals were sized for a desktop window */
    #form_panel, #contact_panel{ width: 100%; left: 0; right: 0; }

    /* nothing on a phone should need a sideways scroll */
    #container, .block, .page_block{ max-width: 100%; overflow-x: hidden; }
}

/* a phone in landscape has no height to give a hero */
@media(max-width: 900px) and (orientation: landscape){
    #page_1{ min-height: 100svh; }
}