html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: none;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html { text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-shadow:1px 1px 1px rgba(0,0,0,0.004); font-size:1em; line-height:1.5; letter-spacing:0em; color:#000; background:#EBE8E1; font-family:'Lora', serif; font-weight:normal; height:100%; min-height:100%; }

h1, h2, h3, h4, p { margin:0; font-weight:normal; }
figure { margin:0; padding:0; }
img, svg { width:100%; height:auto; display:block; }
ul { padding:0; margin:0; list-style:none; }
a { text-decoration:none; color:inherit; }

.u__japanese { font-family:'Noto Sans JP', sans-serif; }
.u__gutter { letter-spacing:-0.65em; }

header { position:fixed; width:100%; height:50px; top:0; left:0; z-index:100; mix-blend-mode:difference; color:#e1e1e1; }

.c__logo { position:absolute; width:200px; top:30px; left:50px; }

.c__enquirieslink { position:absolute; top:30px; left:332px; mix-blend-mode:difference; color:#e1e1e1; }
.c__enquirieslink a { font-family:'Syne', sans-serif; font-size:14px; line-height:1.500em; }
.c__enquirieslink a span { font-size:13px; padding-left:15px; }

main { position:relative; }

.c__locomotive { height:100vh; position:relative; }

.c__tracker { width:10px; height:10px; position:absolute; bottom:0; left:0;  }

.c__svgmorph { box-sizing:border-box; padding:84px 50px 43px; height:100%; position:absolute; top:0; left:0; width:100%; }
.c__svgmorph > div { height:100%; }
.c__svgmorph svg { width:100%; height:100%; }
.c__svgmorph .s_mobile { display:none; }

.c__ideasoverwall { font-family:'Syne', sans-serif; z-index:10; position:absolute; margin-top:0; margin-left:0; top:0; left:0; height:100%; width:100%; mix-blend-mode:difference; color:#e1e1e1; /*opacity:calc((1 - var(--progress)) / 0.15);*/ box-sizing:border-box; padding:84px 50px 43px;  }
.c__ideasoverwall > div { height:100%; width:100%; position:relative; }
.c__ideasoverwall .s_text { font-size:14.8vw; letter-spacing:-0.03em; line-height:0.850em; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.c__ideasoverwall .s_text span { display:block; }
.c__ideasoverwall .s_text span:nth-child(2) { margin-left:39%; }
.c__ideasoverwall .s_text span:nth-child(3) { padding-left:4.5%; }
.c__ideasoverwall .s_vertical { position:absolute; width:100%; top:50%; left:0; transform:translateY(-50%); }
.c__ideasoverwall .s_vertical .s_text { position:static; top:0; left:0; transform:none; visibility:hidden; }
.c__ideasoverwall p { height:auto; right:8.28%; width:auto; top:18px; position:absolute; display:flex; }
.c__ideasoverwall p span { writing-mode:vertical-rl; letter-spacing:2px; width:auto; font-size:1.7vw; line-height:1.100em; display:block; }
.c__ideasoverwall .s_wrapper { position:absolute; width:100%; height:100%; top:0; left:0; }

.c__intro { margin:0 auto; box-sizing:border-box; padding:101px 50px 38px; }
.c__intro .s_header { margin-bottom:38px; }
.c__intro .s_header h2 { font-family:'Lora', serif; font-size:35px; line-height:42px; letter-spacing:-0.5px; }
.c__intro .s_header p { font-family:'Syne', sans-serif; font-size:30px; line-height:36px; margin-top:16px; }

.c__intro .s_info { box-sizing:border-box; padding-bottom:33px; }
.c__intro .s_info label { font-family:'Syne', sans-serif; font-size:13px; line-height:16px; color:#F32432; display:block; margin-bottom:7px; }
.c__intro .s_info .s_cols { display:flex; flex-wrap:wrap; }
.c__intro .s_info .s_cols.v_2 .s_col { width:33.33%; box-sizing:border-box; padding-right:25px; }
.c__intro .s_info .s_cols.v_2 figure { width:24px; }
.c__intro .s_info .s_cols.v_3 .s_col { width:33.33%; }
.c__intro .s_info .v_founders h3 { font-family:'Syne', sans-serif; font-size:22px; line-height:26px; }
.c__intro .s_info .v_founders h3 span { display:inline-block; width:14px; height:14px; background:url(../img/arrow-link.svg) center center no-repeat; background-size:13.45px; margin-left:11px; }
.c__intro .s_info .v_founders p { font-size:14px; line-height:17px; }
.c__intro .s_info .v_founders p span { font-size:18px; line-height:22px; display:block; margin-bottom:6px; }

.c__intro .s_info + .s_info { border-top:1px solid #F32432; padding-top:21px; }
.c__intro .s_info .v_info p { font-family:'Lora', serif; font-size:14px; line-height:17px; }
.c__intro .s_info .v_info p > span { font-size:15px; line-height:18px; display:block; margin-top:4px; }
.c__intro .s_info .v_info p > span span { font-family:'Syne', sans-serif; }

footer { position:fixed; bottom:0; left:0; width:100%; height:0; z-index:10; }

.c__arrow { position:absolute; left:50%; top:-110px; margin-left:-21px; width:42px; height:42px; transform:rotate(180deg); }
.c__arrow.v_flip { transform:rotate(0); top:-75px; }

.c_firstflowarrow, .c_secondflowarrow { display:none; }

@media only screen and (min-width: 830px) {
    .c__intro > div { box-sizing:border-box; min-width:730px; width:58.33%; margin:0 auto; }

    .c__ideasoverwall .s_wrapper { box-sizing:border-box; min-width:730px; width:58.33%; left:50%; transform:translateX(-50%); }
}

@media only screen and (min-width: 1228px) {
    .c__enquirieslink { left:0; width:100%; box-sizing:border-box; padding-left:50px; padding-right:50px; }
    .c__enquirieslink > div { width:58.33%; margin-left:25.07%; }

    .c__intro > div { min-width:none; width:58.33%; margin-left:25.07%; }
    .c__ideasoverwall .s_wrapper { min-width:none; width:58.33%; margin-left:16.71%; left:0; transform:translateX(0); }
}

@media only screen and (min-width: 1680px) {
    .c__ideasoverwall .s_text { font-size:248.64px; } /* 634 */
    .c__ideasoverwall p { height:634px; top:50%; transform:translateY(-50%); box-sizing:border-box; padding-top:22px; }
    .c__ideasoverwall p span { font-size:28.56px; }
}

@media only screen and (max-width: 800px) {
    .c__logo { position:absolute; width:150px; top:21px; left:20px; }
    .c__enquirieslink { top:17px; left:192px; }
    .c__enquirieslink a { font-size:12px; }
    .c__enquirieslink a span { font-size:11px; padding-left:9px; }

    .c__locomotive { height:auto; min-height:100vh; }
    .c__locomotive:first-child { max-height:680px; }

    .c__svgmorph { padding:65px 20px 87px; transform:none !important; opacity:1 !important; }
    .c__svgmorph .s_mobile { display:block; }
    .c__svgmorph .s_desktop { display:none; }

    .c__ideasoverwall { transform:none !important; opacity:1 !important; padding-left:30px; padding-right:20px; }
    .c__ideasoverwall .s_text { font-size:20vw; line-height:0.825em; letter-spacing:-0.045em; }
    .c__ideasoverwall .s_text span:nth-child(2) { margin-left:36%; }
    .c__ideasoverwall .s_text span:nth-child(3) { padding-left:5%; }
    .c__ideasoverwall p { right:11.45%; top:2px; }
    .c__ideasoverwall p span { letter-spacing:2px; font-size:4.2vw; line-height:1.200em; }
    .c__ideasoverwall .s_vertical { top:0; transform:translateY(0); }

    .c__intro { padding:81px 20px 64px; }
    .c__intro .s_header { margin-bottom:60px; }
    .c__intro .s_header h2 { font-size:19px; line-height:22px; }
    .c__intro .s_header p { font-size:16px; line-height:19px; margin-top:19px; }
    
    .c__intro .s_info { padding-bottom:25px; }
    .c__intro .s_info + .s_info { padding-top:26px; }

    .c__intro .s_info label { margin-bottom:6px; }
    .c__intro .s_info + .s_info label { margin-bottom:9px; }
    .c__intro .s_info .s_cols.v_2 .s_col + .s_col { margin-top:26px; }
    .c__intro .s_info .s_cols.v_3 .s_col:first-child { margin-bottom:25px; }

    .c_firstflowarrow, .c_secondflowarrow { display:block; position:absolute; bottom:0; left:0;  width:100%; height:0; }
    .c_firstflowarrow figure { position:absolute; width:30px; height:30px; left:50%; bottom:23px; transform:translateX(-50%) rotate(180deg); }
    .c_secondflowarrow figure { position:absolute; width:30px; height:30px; left:50%; bottom:33px; transform:translateX(-50%); }

    footer { display:none; }
}

@media only screen and (max-width: 600px) {
    .c__intro .s_info .s_cols.v_2 .s_col { width:100%; }
    .c__intro .s_info .s_cols.v_3 .s_col { width:50%; }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* 960 */
@media only screen and (min-width: 60.000em) {
    
}

@media (orientation: landscape) and (min-width: 60.000em)  {
    
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}