/*!
 * raad.dev site styles. Only the rules the pages use, trimmed from:
 * Bootstrap v3.0.0, Copyright 2013 Twitter, Inc, Apache License v2.0, http://www.apache.org/licenses/LICENSE-2.0
 */

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased
}

a:focus {
    outline: thin dotted
}

/* remove the border when focus on a tags */
a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
}

a {
    transition: all .3s ease-in-out
}

a:active,
a:hover {
    outline: 0
}

figure {
    margin: 0
}

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

html {
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    font-family: brandon-grotesque, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #545454;
    background-color: #fff;
    user-select: none;
}

a {
    color: #1f73b2;
    text-decoration: none
}

a:hover,
a:focus {
    color: #2f77b2;
    text-decoration: underline
}

a:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

img {
    vertical-align: middle
}

p {
    margin: 0 0 10px;
    font-family: adobe-garamond-pro, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    user-select: text;
}

.lead {
    margin-bottom: 20px;
    font-size: 16.1px;
    font-weight: 200;
    line-height: 1.4;
    text-align: center;

}

@media (min-width:768px) {
    .lead {
        font-size: 21px
    }
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    line-height: 1.1;
    user-select: text;
}

h1,
h2,
h3 {
    margin-top: 20px;
    margin-bottom: 10px
}

h1 {
    font-size: 36px
}

ul {
    margin-top: 0;
    margin-bottom: 10px
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

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

.container:after {
    clear: both
}

.row {
    margin-left: -15px;
    margin-right: -15px
}

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

.row:after {
    clear: both
}

.col-xs-4,
.col-xs-8,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px
}

.col-xs-4,
.col-xs-8 {
    float: left
}

.col-xs-4 {
    width: 33.33333333%
}

.col-xs-8 {
    width: 66.66666667%
}

@media (min-width:768px) {
    .container {
        max-width: 750px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 970px
    }

    
    .col-md-4,
    .col-md-6,
    .col-md-8 {
        float: left
    }

    .col-md-4 {
        width: 33.33333333%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-push-7 {
        left: 58.33333333%
    }

    .col-md-pull-3 {
        right: 25%
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%
    }
}

@keyframes bubblinger-vert {
    0% {
        background-position: 0 0
    }

    5% {
        background-position: 0 -77px
    }

    35% {
        background-position: 0 -77px
    }

    40% {
        background-position: 0 -154px
    }

    68% {
        background-position: 0 -154px
    }

    73% {
        background-position: 0 -231px
    }

    100% {
        background-position: 0 -231px
    }
}

@keyframes bubblinger-vert-down {
    0% {
        background-position: 0 0
    }

    5% {
        background-position: 0 77px
    }

    35% {
        background-position: 0 77px
    }

    40% {
        background-position: 0 154px
    }

    68% {
        background-position: 0 154px
    }

    73% {
        background-position: 0 231px
    }

    100% {
        background-position: 0 231px
    }
}

.container {
    transition: all .5s ease-in-out
}

::selection {
    background: #e4e4e4;
    color: #545454;
    text-shadow: none
}

.transistion {
    transition: all .5s ease-in-out
}

.image-text {
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px
}

.image-text a {
    display: block;
    height: 100%;
}

#header-logo {
    animation: fadeIn .3s ease-in-out;
    border-radius: 60px;
    overflow: hidden;
    width: 72px;
    height: 72px;
    position: relative
}

#header-logo span {
    display: block
}

#header-logo .mask {
    background-image: url(../img/content/nav/header-logo-mask.png);
    position: absolute;
    height: 72px;
    width: 72px;
    z-index: 1000
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    #header-logo .mask {
        background-image: url(../img/content/nav/header-logo-mask%402x.png);
        background-size: 72px 72px
    }
}

#header-logo .behind {
    background: #f6f9f8;
    position: absolute;
    height: 72px;
    width: 72px;
    z-index: 800
}

#header-logo i {
    position: absolute;
    left: 7px;
    top: 11px;
    width: 300px;
    height: 200px;
    background: url(../img/content/nav/header-logo-i.svg) no-repeat;
    z-index: 900
}

#top {
    overflow: hidden;
    background: #e4e4e4
}

@media (min-width:992px) {
    #top {
        padding-top: 130px
    }
}

header {
    background: #e4e4e4;
    padding: 1em 0
}

header .nav-list {
    padding-top: 1.5em;
    padding-left: 0;
    position: relative;
    float: right
}

header.nav-top {
    position: relative;
    width: 100%;
    z-index: 1000;
    transform: translate3d(0, 0, 0)
}

@media (min-width:992px) {
    header.nav-top {
        position: fixed;
        transition: .5s;
        top: 0
    }
}

@media (min-width:992px) {
    header.nav-fixed {
        box-shadow: 0 1px 1px rgba(6, 8, 8, .1);
        opacity: .97;
        transition: all .8s;
        backface-visibility: hidden;
        overflow: hidden;
        transition-timing-function: ease-in-out;
        background: #fff
    }
}

header.nav-root {
    background: inherit
}

@media (min-width:992px) {
    header.nav-root {
        box-shadow: none;
        transition: all .8s
    }
}

@media (min-width:992px) {
    header.headroom--unpinned {
        top: -200px
    }
}

.nav-list li {
    display: block;
    float: left
}

.nav-list li a {
    display: inline-block;
    color: #968e8e;
    font-size: 120%;
}

.nav-list li a:hover {
    color: #1f73b2
}

.nav-list li a.active {
    color: #1f73b2
}

.nav-list li:first-child a {
    margin-left: 0
}

@media (min-width:992px) {
    .nav-list li a {
        font-size: 150%;
        margin: 0 0 0 2em
    }
}

#earth-holder {
    margin: 0 auto;
    max-width: 800px;
    overflow: hidden
}

.masthead-wrap {
    animation: fadeIn .5s ease-in-out
}

#title.work-head {
    padding-bottom: 4em
}

h1.im-raad figure {
    max-width: 240px;
    margin: 0 auto;
    position: relative;
    z-index: 990
}

h1.im-raad img {
    width: 100%;
    display: inline-block
}

@media (min-width:992px) {
    h1.im-raad figure {
        max-width: 350px
    }
}

h1.work figure {
    max-width: 140px;
    margin: 0 auto;
    position: relative;
    z-index: 990;
    animation-delay: .2s
}

h1.work img {
    width: 100%;
    display: inline-block
}

@media (min-width:992px) {
    h1.work figure {
        max-width: 200px
    }
}

h1.notes figure {
    max-width: 140px;
    margin: 0 auto;
    position: relative;
    z-index: 990;
    animation-delay: .2s
}

h1.notes img {
    width: 100%;
    display: inline-block
}

@media (min-width:992px) {
    h1.notes figure {
        max-width: 200px
    }
}

/* a text title sized like the lettered ones above, for pages without artwork */
h1.page-title {
    position: relative;
    z-index: 990;
    margin: 0;
    color: #1f73b2;
    font-size: 34px;
    font-weight: 300;
    line-height: 64px;
    text-align: center
}

@media (min-width:992px) {
    h1.page-title {
        font-size: 44px;
        line-height: 91px
    }
}

#head-slider p.header-desc {
    text-align: center;
    color: #a5a5a5;
    padding: .5em 0;
    font-size: 180%;
    font-weight: 400;
    font-family: brandon-grotesque, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    user-select: none;
}

#title {
    padding: .5em 0 0;
    position: relative
}

#title .container {
    position: relative
}

#title .cloud {
    position: absolute;
    background: url(../img/ui/cloud.svg) top left no-repeat;
    width: 150px;
    height: 45px;
    transition: all 1s ease-in-out;
    z-index: 980
}

#title .left-cloud {
    left: -6em;
    bottom: 2em
}

@media (min-width:992px) {
    #title .left-cloud {
        left: 2em;
        bottom: 5em
    }
}

#title .right-cloud {
    right: -5em
}

@media (min-width:992px) {
    #title .right-cloud {
        right: 2em;
        top: 6em
    }
}

#title .left-cloud-work {
    left: -6.5em;
    bottom: 5em
}

@media (min-width:992px) {
    #title .left-cloud-work {
        left: -6em;
        bottom: 2em
    }
}

#title .right-cloud-work {
    right: -5em;
    bottom: 5em
}

@media (min-width:992px) {
    #title .right-cloud-work {
        right: -3em
    }
}

#title .left-cloud-notes {
    left: -6.5em;
    bottom: 5em
}

@media (min-width:992px) {
    #title .left-cloud-notes {
        left: -6em
    }
}

#title .right-cloud-notes {
    right: -5em;
    bottom: 5em
}

@media (min-width:992px) {
    #title .right-cloud-notes {
        bottom: 2em
    }
}

#title .flag {
    position: absolute;
    background: url(../img/content/home/masthead/flag.svg) top left no-repeat;
    width: 42px;
    height: 154px
}

#title .flag.flag-left {
    left: 1.5em;
    bottom: -8.5em
}

@media (min-width:992px) {
    #title .flag.flag-left {
        left: 12em;
        bottom: -4em
    }
}

#title .flag.flag-right {
    right: 2.5em;
    bottom: -8.5em
}

@media (min-width:992px) {
    #title .flag.flag-right {
        right: 15em;
        bottom: -4em
    }
}

#head-slider {
    padding: 1em 0;
}

@media (min-width:992px) {
    #head-slider {
        padding: 4em 0
    }
}

#hello {
    z-index: 980;
    position: relative;
    padding: 3em 0 0;
    margin: 0 0 3em
}

@media (min-width:992px) {
    #hello {
        padding: 6em 0 0;
        margin: 0 0 6em
    }
}

#hello article {
    margin: 0 auto;
    max-width: 460px
}

#hello article figure {
    margin: 0 auto;
    max-width: 150px
}

#hello article h3 {
    text-align: center;
    padding: .5em 0
}

#hello article p {
    text-align: center
}

h3 {
    font-size: 2em;
    color: #1f73b2
}

p {
    font-size: 1.5em
}

p a {
    user-select: none;
    /*    border-bottom: 1px solid #1f73b2*/
}

p a:hover {
    text-decoration: none;
    border-bottom: 1px solid #ada5a5;
}

.breaker {
    margin: 0 auto;
    max-width: 100px
}

.breaker .line {
    background-image: url(../img/ui/line-bg.png);
    height: 6px;
    width: 104%
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    .breaker .line {
        background-image: url(../img/ui/line-bg%402x.png);
        background-size: auto 6px
    }
}

article header {
    background: 0 0
}

article header h2 {
    color: #1f73b2;
    text-align: center;
    font-size: 3.2em;
    font-weight: 400
}

#what-i-do {
    z-index: 980;
    position: relative;
    background: #fff
}

@media (min-width:992px) {
    #what-i-do {
        padding: 3em 0
    }
}

#what-i-do #design {
    margin: 1em 0;
    text-align: center
}

@media (min-width:992px) {
    #what-i-do #design {
        text-align: left;
        margin: 3em 0 6em
    }
}

#what-i-do #develop {
    margin: 1em 0;
    text-align: center
}

@media (min-width:992px) {
    #what-i-do #develop {
        text-align: left;
        margin: 3em 0
    }
}

#what-i-do .home-dev-info {
    background-image: url(../img/content/home/what-i-do/line-bg.png);
    background-position: center center;
    background-repeat: repeat-x;
    position: relative;
    min-height: 155px
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    #what-i-do .home-dev-info {
        background-image: url(../img/content/home/what-i-do/line-bg%402x.png);
        background-size: 3px auto
    }
}

#what-i-do .home-dev-info img {
    float: right;
    width: 100%;
    max-width: 180px;
    margin-right: -20px
}

@media (min-width:992px) {
    #what-i-do .home-dev-info img {
        margin-right: -30px
    }
}

#what-i-do .home-design-info {
    background-image: url(../img/content/home/what-i-do/line-bg.png);
    background-position: center center;
    background-repeat: repeat-x;
    position: relative
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    #what-i-do .home-design-info {
        background-image: url(../img/content/home/what-i-do/line-bg%402x.png);
        background-size: 3px auto
    }
}

#what-i-do .home-design-info figure {
    max-width: 150px
}

#what-i-do h3 {
    padding: 0 0 1em;
    margin: 0
}

#what-i-do .bubble {
    background: #F3F2F1;
    border-radius: 60px;
    position: absolute;
    overflow: hidden;
    top: 2.6em
}

#what-i-do .bubble .bubbling-design-icons-vert {
    animation-name: bubblinger-vert-down;
    border-radius: 60px;
    width: 77px;
    height: 77px;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    background-image: url(../img/content/home/what-i-do/design-icons.svg)
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    #what-i-do .bubble .bubbling-design-icons-vert {
        background-image: url(../img/content/home/what-i-do/design-icons.svg);
        background-size: 77px 231px
    }
}

#what-i-do .bubble .bubbling-dev-icons-vert {
    animation-name: bubblinger-vert;
    border-radius: 60px;
    width: 77px;
    height: 77px;
    animation-duration: 13s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    background-image: url(../img/content/home/what-i-do/dev-icons.svg)
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:1.5dppx) {
    #what-i-do .bubble .bubbling-dev-icons-vert {
        background-image: url(../img/content/home/what-i-do/dev-icons.svg);
        background-size: 77px 231px
    }
}

#what-i-do .right {
    right: 0
}

#what-i-do .deets {
    padding: 2em 0
}

@media (min-width:992px) {
    #what-i-do .deets {
        padding: 0 0 0 2em
    }
}

#i-can-help {
    text-align: center;
    padding: 0 0 4em
}

@media (min-width:992px) {
    #i-can-help {
        padding: 3em 0 8em
    }
}

#i-can-help article {
    max-width: 600px;
    margin: 0 auto
}

#i-can-help h3 {
    padding-top: 1em
}

.btn-hldr .main-btn {
    font-size: .8em;
    display: inline-block;
    position: relative;
    background: #1f73b2;
    padding: .75em 2em .75em 2em;
    color: #ffffff;
    margin: 1.5em 0 0;
    border-radius: 7px;
    /* font-weight: bold; */
    font-family: brandon-grotesque, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
}

.btn-hldr .main-btn:hover {
    background: #848a89;
    border: 0
}

footer {
    background: #e5e5e5;
    padding: 3em 0
}

footer p {
    text-align: center;
    color: #1f73b2;
    font-size: 1em;
    font-weight: 400;
    margin: 0;
    padding: 2.5em 0 0
}

footer .footer-list {
    overflow: hidden;
    margin: 0 auto;
    max-width: 600px;
    padding: 0
}

footer .footer-list li {
    width: 50%;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
    float: left
}

@media (min-width:992px) {
    footer .footer-list li {
        width: 25%;
        padding: 0
    }
}

footer .footer-list a {
    display: block;
    text-align: center;
    color: #ada5a5;
    font-size: 1.5em
}

footer .footer-list a:hover {
    color: #1f73b2
}

.note {
    max-width: 730px;
    margin: 0 auto;
    padding: 4em 0 2em;
    overflow: hidden;
}

@media (min-width:992px) {
    .note {
        padding: 8em 0 4em
    }
}

.note h2 {
    text-align: center;
    color: #1f73b1;
    font-size: 2.5em;
    font-weight: 400;
    margin: 0
}

@media (min-width:992px) {
    .note h2 {
        font-size: 3.5em
    }
}

.note h3 {
    text-align: center;
    color: #45b29a;
    font-weight: 400;
    margin: 0;
    padding: 1em 0 .6em
}

/* each word a badge, tinted in its own colour */
.note h3 span {
    display: inline-block;
    margin: 0 3px 6px;
    padding: .3em 1em;
    border-radius: 6px;
    color: #2e8c77;
    background: #e6f4f0;
    font-size: .75em
}

.note h3 span:nth-child(2) {
    color: #666;
    background: #f0f0f0
}

.note h3 span:nth-child(3) {
    color: #c95458;
    background: #fbeaea
}

@media (min-width:992px) {
    .note h3 {
        padding: 1.2em 0 1em
    }
}

.note .lead {
    font-size: 23.8px;
    font-weight: 300;
    margin: 0 0 1em
}

@media (min-width:992px) {
    .note .lead {
        font-size: 35px
    }
}

.note p {
    margin: 0 0 1.5em;
    font-size: 1.4em
}

@media (min-width:992px) {
    .note p {
        font-size: 1.6em
    }
}

/* privacy policy: section headings inside a note */
.note h4 {
    color: #1f73b2;
    font-weight: 400;
    margin: 1.6em 0 .5em
}

.policy .note {
    padding-top: 2.5em;
    padding-bottom: 3em
}

/* the policy reads as fine print, smaller than the about page */
.policy .note p {
    font-size: 1.1em
}

.policy .note h3 {
    color: #999;
    font-size: .95em;
    padding: .4em 0 3em
}

.policy .note h4 {
    font-size: 1.3em
}

@media (min-width:992px) {
    .policy .note {
        padding-top: 4em
    }

    .policy .note h3 {
        font-size: 1em
    }

    .policy .note p {
        font-size: 1.25em
    }

    .policy .note h4 {
        font-size: 1.5em
    }
}

img {
    user-select: none !important;
}

/* "Things I'm curious about" on the about page */
.curious {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 860px;
    margin: 0 auto;
    padding: 1em 0 3em;
    list-style: none
}

.curious__title {
    text-align: center;
    padding-bottom: .5em
}

.curious__item {
    width: 25%;
    padding: 1.5em 12px;
    text-align: center
}

.curious__icon {
    display: block;
    width: 96px;
    margin: 0 auto 1em;
    padding: 12px;
    border-radius: 50%;
    background: #F3F2F1;
    transition: transform .3s ease-in-out
}

.curious__icon svg {
    display: block
}

.curious__item:hover .curious__icon {
    transform: translateY(-6px)
}

.curious__item h4 {
    color: #1f73b2;
    font-size: 1.7em;
    font-weight: 400;
    margin: 0 0 .4em
}

.curious__item p {
    color: #777;
    font-size: 1.35em;
    margin: 0
}

@media screen and (max-width: 767px) {
    .curious__item {
        width: 50%;
        padding: 1em 8px
    }

    .curious__icon {
        width: 80px;
        height: 80px;
        padding: 10px
    }

    .curious__item h4 {
        font-size: 1.45em
    }

    .curious__item p {
        font-size: 1.15em
    }
}

@media (prefers-reduced-motion: reduce) {
    .curious__icon,
    .project__shot {
        transition: none
    }

    .curious__item:hover .curious__icon,
    .project__shot:hover {
        transform: none
    }
}

/* portfolio intro: one "What I'm into" row from the homepage, with less space around it */
#what-i-do.intro-row {
    padding: 3.5em 0 2.5em
}

#what-i-do.intro-row #design {
    margin: 1em 0 2em
}

@media (min-width:992px) {
    #what-i-do.intro-row {
        padding: 6em 0 5.5em
    }

    #what-i-do.intro-row #design {
        margin: 1em 0 3em
    }
}

/* the intro's illustration slides through its frames, like the homepage bubbles */
.intro-cycle {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #F3F2F1
}

.intro-cycle__art {
    position: absolute;
    inset: 0;
    background: url(../img/content/home/work/intro-icons.svg) no-repeat 50% 0;
    background-size: 100% auto;
    animation: intro-cycle 12s cubic-bezier(.7, 0, .3, 1) infinite
}

/* four frames; the last repeats the first so the loop wraps without a jump */
@keyframes intro-cycle {
    0%, 28% { background-position: 50% 0 }
    33.333%, 61% { background-position: 50% 33.333% }
    66.667%, 94% { background-position: 50% 66.667% }
    100% { background-position: 50% 100% }
}

/* well under the homepage's illustrations */
#what-i-do.intro-row .home-design-info figure {
    max-width: 84px
}

@media screen and (max-width: 767px) {
    #what-i-do.intro-row .home-design-info figure {
        max-width: 53px
    }
}

/* desktop: the dotted line runs from the illustration to the text */
/* desktop: circle, a short line, then the text, all centred as one group */
@media (min-width:992px) {
    #what-i-do.intro-row #design {
        display: flex;
        justify-content: center;
        align-items: flex-start
    }

    #what-i-do.intro-row #design > [class*="col-"] {
        float: none;
        margin-left: 0;
        padding: 0
    }

    /* 84px circle plus 80px of dotted line */
    #what-i-do.intro-row #design > .col-md-4 {
        flex: none;
        width: 164px
    }

    #what-i-do.intro-row #design > .col-md-6 {
        flex: 0 1 480px
    }

    /* lower the text so the line meets the middle of the title */
    #what-i-do.intro-row .deets {
        padding: 25px 0 0 16px
    }

    /* the paragraph starts just past the circle, under the line */
    #what-i-do.intro-row .deets p {
        margin-left: -76px
    }
}

/* portfolio: the title and circle as one centred row, the text centred beneath it */
.intro-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

/* stacked: circle on top */
#what-i-do.intro-row .intro-head .home-design-info {
    order: -1;
    width: 100%;
    margin: 0 0 1em
}

#what-i-do .intro-head h3 {
    padding: 0
}

.intro-text {
    max-width: 560px;
    margin: 1.5em auto 0;
    text-align: center
}

/* desktop: title, then the line running right into the circle */
@media (min-width:992px) {
    .intro-head {
        flex-direction: row;
        justify-content: center
    }

    /* 84px circle plus 80px of dotted line */
    #what-i-do.intro-row .intro-head .home-design-info {
        order: 0;
        flex: none;
        width: 164px;
        margin: 0
    }

    #what-i-do.intro-row .intro-head .home-design-info figure {
        margin: 0 0 0 auto
    }

    #what-i-do .intro-head h3 {
        padding: 0 16px 0 0
    }

    /* the circle already leaves room under the title, so the text needs little extra */
    .intro-text {
        margin-top: .5em
    }
}

/* stacked: centre the illustration, no line */
@media screen and (max-width: 991px) {
    #what-i-do.intro-row .home-design-info {
        background: none;
        margin: 0
    }

    #what-i-do.intro-row .home-design-info figure {
        margin: 0 auto
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-cycle__art {
        animation: none
    }
}

/* 404 page */
#what-i-do.intro-row--404 {
    padding-bottom: 4em
}

@media (min-width:992px) {
    #what-i-do.intro-row--404 {
        padding: 5em 0 6em
    }
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 2.5em;
    /* a <p>, but the buttons should be the same size as everywhere else */
    font-size: 1em
}

.intro-actions .project__link {
    margin-top: .6em
}

/* secondary button: outline in the same shape and type as the main one */
.project__link.project__link--ghost {
    background: transparent;
    color: #1f73b2;
    box-shadow: inset 0 0 0 1px #1f73b2
}

/* 404 buttons: keep their colours on hover and just grow by 1%; no outline after a click */
.intro-actions .project__link {
    transition: transform .2s ease
}

.intro-actions .project__link:hover,
.intro-actions .project__link:focus {
    background: #1f73b2;
    color: #fff;
    text-decoration: none;
    border: 0
}

.intro-actions .project__link:hover {
    transform: scale(1.01)
}

@media (prefers-reduced-motion: reduce) {
    .intro-actions .project__link {
        transition: none
    }

    .intro-actions .project__link:hover {
        transform: none
    }
}

.intro-actions .project__link.project__link--ghost:hover,
.intro-actions .project__link.project__link--ghost:focus {
    background: transparent;
    color: #1f73b2
}

.intro-actions .project__link:focus:not(:focus-visible) {
    outline: none
}

@media screen and (max-width: 991px) {
    .intro-actions {
        flex-direction: column;
        gap: 22px;
        max-width: 360px;
        margin: 2.5em auto 0
    }

    .intro-actions .project__link {
        margin-top: 0
    }
}

/* portfolio projects */
.projects {
    padding-bottom: 2em
}

.project {
    padding: 5em 0;
    background: #fff
}

.project:nth-child(odd) {
    background: #f7f7f6
}

.project__inner {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1040px;
    margin: 0 auto
}

.project:nth-child(even) .project__inner {
    flex-direction: row-reverse
}

.project__shot {
    flex: 1.15;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(6, 8, 8, .06), 0 14px 34px rgba(6, 8, 8, .10);
    transition: transform .35s ease, box-shadow .35s ease
}

.project__shot img {
    display: block
}

.project__shot:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(6, 8, 8, .06), 0 20px 44px rgba(6, 8, 8, .14)
}

.project__info {
    flex: 1
}

.project__tag {
    display: inline-block;
    margin: 0 4px 6px 0;
    color: #1f73b2;
    background: #eaf2f9;
    border-radius: 999px;
    padding: .35em 1em;
    font-size: 1.2em
}

.project__info h2 {
    color: #1f73b2;
    font-size: 3.2em;
    font-weight: 400;
    margin: .45em 0 .15em
}

.project__info h3 {
    color: #8a8580;
    font-size: 1.65em;
    font-weight: 300;
    margin: 0 0 1em
}

.project__info p {
    line-height: 1.6;
    text-wrap: pretty;
    margin: 0
}

.project__stats {
    display: flex;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 1.6em 0 0
}

.project__stats li {
    color: #8a8580;
    font-size: 1.3em
}

.project__stats strong {
    display: block;
    color: #1f73b2;
    font-size: 1.85em;
    font-weight: 400
}

.project__stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 1.6em 0 0
}

/* same shape as the "Life design work" badges on the contact page, in their grey */
.project__stack li {
    padding: .3em .8em;
    border-radius: 6px;
    color: #666;
    background: #f0f0f0;
    font-size: 1em
}

/* same look as the site's "contact me" button */
.project__link {
    display: inline-block;
    margin-top: 1.8em;
    padding: .75em 2em;
    border-radius: 7px;
    background: #1f73b2;
    color: #fff;
    font-family: brandon-grotesque, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.2em;
    text-align: center;
    text-transform: uppercase
}

.project__link:hover,
.project__link:focus {
    background: #848a89;
    color: #fff;
    text-decoration: none
}

@media screen and (max-width: 991px) {
    .project {
        padding: 3.5em 0
    }

    .project__inner,
    .project:nth-child(even) .project__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        width: 100%;
        max-width: none;
        text-align: center
    }

    .project__shot,
    .project__info {
        flex: none;
        width: 100%
    }

    #i-can-help article {
        max-width: none
    }

    .project__stats,
    .project__stack {
        justify-content: center
    }
}

@media screen and (max-width: 767px) {
    .project {
        padding: 2.5em 0
    }

    .project__shot {
        border-radius: 10px
    }

    .project__tag {
        margin: 0 2px 6px;
        padding: .3em .85em;
        font-size: .93em
    }

    .project__info h2 {
        font-size: 2.15em;
        margin-top: .35em
    }

    .project__info h3 {
        font-size: 1.2em;
        line-height: 1.3;
        text-wrap: balance;
        margin-bottom: 1.1em
    }

    .project__stats {
        gap: 40px;
        margin-top: 1.4em
    }

    .project__stats li {
        font-size: 1em
    }

    .project__stats strong {
        font-size: 1.9em
    }

    .project__stack {
        margin-top: 1.4em
    }

    .project__stack li {
        font-size: .93em
    }

    .project__link {
        margin-top: 1.6em;
        padding: .85em 2.2em;
        font-size: 1em;
        letter-spacing: .04em
    }
}

/* mobile tweaks */
@media screen and (max-width: 991px) {
    header .nav-list {
        padding-top: 1.1em;
        display: flex;
        /* spacing grows with the screen, so links spread out when there's room */
        gap: clamp(12px, 6vw, 48px)
    }

    .nav-list li {
        float: none
    }

    .nav-list li a {
        padding: 6px 0;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500
    }
}

/* keep the nav on one line next to the logo on small phones */
@media screen and (max-width: 480px) {
    header.nav-top .col-xs-4 {
        width: 102px
    }

    header.nav-top .col-xs-8 {
        width: calc(100% - 102px);
        padding-left: 0
    }

    header .nav-list {
        white-space: nowrap
    }

    .nav-list li a {
        font-size: 110%
    }
}

@media screen and (max-width: 340px) {
    .nav-list li a {
        font-size: 100%
    }
}

/* smaller body text and illustrations on phones */
@media screen and (max-width: 767px) {
    p {
        font-size: 1.15em
    }

    h3 {
        font-size: 1.6em
    }

    article header h2 {
        font-size: 2.2em
    }

    #hello article figure {
        max-width: 100px
    }

    /* keep the illustrations and bubbles away from the screen edges */
    #what-i-do .home-design-info,
    #what-i-do .home-dev-info {
        margin: 0 20px
    }

    #what-i-do .home-design-info figure {
        max-width: 95px
    }

    #what-i-do .home-dev-info {
        min-height: 99px
    }

    #what-i-do .home-dev-info img {
        max-width: 115px;
        margin-right: 0
    }

    /* scale the animated icon bubbles with the smaller illustrations */
    #what-i-do .bubble {
        top: 10px;
        transform: scale(.65)
    }

    .note {
        padding-left: 12px;
        padding-right: 12px
    }

    .note h2 {
        font-size: 2.1em
    }

    .note .lead {
        font-size: 19px
    }

    .note p {
        font-size: 1.15em
    }

}

img {
    max-width: 100%;
    height: auto
}