/* ===================================================
   Build Affect - custom overrides

   Kept separate from the template's main.css / responsive.css so the
   vendor stylesheets stay pristine and upgradable. Loaded last.
====================================================== */


/* ====================================================
   Feature headings

   The markup used a leading <br> inside each <h3> to fake top spacing
   (left over from a removed description paragraph). The <br>s are gone;
   this reproduces the spacing properly.
=======================================================*/
.feature-lists-style-one .title {
    margin-top: 26px;
}


/* ====================================================
   Contact section

   Previously #contact held only a 15x15 toggle button and the real
   contact details sat in the footer behind display:none. The details now
   live here and are always visible.

   White keeps the page's alternating band rhythm - #who (.team-member) is
   already #f7f7f7, so matching it would merge the two sections visually.
=======================================================*/
.contact {
    background-color: #fff;
}

.contact .section-head p {
    max-width: 620px;
    margin: 0px auto;
}

.contact-info-block {
    text-align: center;
    margin-top: 8px;
}

.contact-info-block .contact-info-lists {
    padding-left: 0px;
    margin-bottom: 25px;
}

.contact-info-block .contact-info-lists li {
    display: inline-block;
    margin: 0px 20px 20px 20px;
}

/* The template styles the icon chip as white-on-white, which disappears on
   this section's background. Give it the brand colour instead. */
.contact-info-block .contact-info-lists li a,
.contact-info-block .contact-info-lists li .contact-static {
    font-size: 15px;
    color: #777;
    display: inline-block;
    position: relative;
    padding-left: 47px;
    min-height: 35px;
    padding-top: 6px;
    text-align: left;
}

.contact-info-block .contact-info-lists li a span,
.contact-info-block .contact-info-lists li .contact-static span {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    background: #00baff;
    border-radius: 50%;
    text-align: center;
    padding: 0px;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-info-block .contact-info-lists li a span i,
.contact-info-block .contact-info-lists li .contact-static span i {
    font-size: 17px;
    color: #fff;
}

.contact-info-block .contact-info-lists li a:hover {
    color: #00baff;
}

/* Location is a fact, not a link - keep the cursor honest. */
.contact-info-block .contact-info-lists li .contact-static {
    cursor: default;
}

.contact-social {
    padding-left: 0px;
    margin: 0px;
}


/* ====================================================
   Placeholder links

   The "Why We Build" list items are <a> elements for styling only and no
   longer carry href="#". Without an href a browser drops the pointer
   cursor, so restore it where the template expects one.
=======================================================*/
.app-reasion-lists li a {
    cursor: default;
}


/* ====================================================
   Footer

   The old footer .top carried a duplicate copy of the contact details,
   which now live in #contact. The band is kept - it anchors the bottom of
   the page - but reduced to the brand mark and tagline.
=======================================================*/
.main-footer .top.footer-brand {
    padding: 55px 0px 45px;
}

.main-footer .footer-mark {
    margin-bottom: 18px;
    opacity: .9;
}

.main-footer .footer-brand .contact-title {
    margin-bottom: 12px;
}

.main-footer .footer-tagline {
    color: #888;
    font-size: 14px;
    margin: 0px;
}

/*=======================================================
   Salvage from Materialize (removed — see issue #2)
   -------------------------------------------------------
   materialize.min.css was loaded FIRST, ahead of Bootstrap
   and main.css, so it was acting as this site's base/reset
   layer rather than as a component library. Only four
   `waves-effect` spans used it as a component.

   Bootstrap 3 replaces most of that reset, but not all of
   it. These are the rules the page actually depended on,
   re-declared so removing 139KB of framework changes
   nothing visually.
=======================================================*/

/* Materialize reset `ul { list-style-type: none; padding: 0 }`. main.css only
   resets CLASSED lists, and index.html has six bare <ul> elements that would
   otherwise get default bullets and ~40px of indent. */
ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    list-style-type: none;
}

/* Container-level inheritance only — the nav's visible text lives in <a>
   elements that main.css colours itself. Kept so the computed styles match
   exactly rather than "close enough". */
nav {
    color: #fff;
}

/* The .btn component styles that were actually winning. NOTE these are only the
   properties Materialize was genuinely applying, not its whole .btn rule:
   custom.css loads LAST, so copying the rule wholesale would hand it precedence
   over Bootstrap's .btn that it never had when materialize.min.css loaded first. */
.btn {
    color: #fff;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Sizes the icons inside .btn — the social links and the four feature buttons.
   Left in rem deliberately: the root font size is 14px from main.css, not from
   Materialize, so 1.3rem resolves to the same 18.2px it always did. */
.btn i {
    font-size: 1.3rem;
    line-height: inherit;
}

/*=======================================================
   Preloader spinner
   -------------------------------------------------------
   The "Loading..." spinner at the top of <body> is a
   Materialize preloader — .preloader-wrapper / .spinner-layer
   / .circle-clipper / .gap-patch. Without these rules the
   markup collapses to a few static divs and the spinner
   silently disappears.

   Four keyframe sets drive it: the wrapper rotates
   continuously, the layer sweeps through fill/unfill, and
   the two half-circles counter-rotate to draw the arc.
=======================================================*/
.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
}

.preloader-wrapper.small {
    width: 36px;
    height: 36px;
}

.preloader-wrapper.active {
    animation: container-rotate 1568ms linear infinite;
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.spinner-blue,
.spinner-blue-only {
    border-color: #4285f4;
}

.active .spinner-layer.spinner-blue-only {
    opacity: 1;
    animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
}

.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

.gap-patch .circle {
    width: 1000%;
    left: -450%;
}

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

/* Generic float helpers. The two clipper halves are .circle-clipper.left and
   .circle-clipper.right, so without these they stop floating and the arc stops
   being drawn as two halves. Kept !important to match the original exactly —
   Materialize declared them that way, so they already won over anything in
   main.css regardless of load order. */
.left {
    float: left !important;
}

.right {
    float: right !important;
}

.circle {
    border-radius: 50%;
}

.circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    border-style: solid;
    border-top-color: inherit;
    border-right-color: inherit;
    border-left-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.circle-clipper.left .circle {
    left: 0;
    transform: rotate(129deg);
    border-right-color: transparent !important;
}

.circle-clipper.right .circle {
    left: -100%;
    transform: rotate(-129deg);
    border-left-color: transparent !important;
}

.active .circle-clipper.left .circle {
    animation: left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both;
}

.active .circle-clipper.right .circle {
    animation: right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both;
}

@keyframes container-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes fill-unfill-rotate {
    12.5% { transform: rotate(135deg); }
    25%   { transform: rotate(270deg); }
    37.5% { transform: rotate(405deg); }
    50%   { transform: rotate(540deg); }
    62.5% { transform: rotate(675deg); }
    75%   { transform: rotate(810deg); }
    87.5% { transform: rotate(945deg); }
    100%  { transform: rotate(1080deg); }
}

@keyframes left-spin {
    0%   { transform: rotate(130deg); }
    50%  { transform: rotate(-5deg); }
    100% { transform: rotate(130deg); }
}

@keyframes right-spin {
    0%   { transform: rotate(-130deg); }
    50%  { transform: rotate(5deg); }
    100% { transform: rotate(-130deg); }
}

/* main.css sets `font-family: "Roboto", sans-serif` but declares no @font-face
   — the faces lived in materialize.min.css. Re-declared here, woff2 + woff
   only (the .ttf sources were for browsers that predate woff support and are
   deleted). Weights match the originals: Thin 200 through Bold 700. */
@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"),
         url("../fonts/roboto/Roboto-Thin.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2"),
         url("../fonts/roboto/Roboto-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
         url("../fonts/roboto/Roboto-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
         url("../fonts/roboto/Roboto-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"),
         url("../fonts/roboto/Roboto-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ====================================================
   Products section (#products)

   A three-card grid of our own products, sitting between #how and #who
   so the page reads: what we build, how we build, what we shipped, who
   did it.

   White (.section-bg-02) on purpose. #what, #how and #who are all
   #f7f7f7, so a fourth grey band would run four sections together with
   no visual break. White splits that run and matches #contact.
=======================================================*/
.products .section-head p {
    max-width: 720px;
    margin: 0px auto;
}

.product-lists {
    margin-top: 12px;
}

.product-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 30px;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

.product-card:hover {
    box-shadow: 0px 10px 26px rgba(0, 0, 0, .09);
    transform: translateY(-3px);
}

/* The shot is the card's lede. A fixed 16:10 box keeps the three cards
   aligned no matter what the source image is - swap in a new capture at
   any size and the grid does not move. */
.product-shot {
    display: block;
    position: relative;
    padding-top: 62.5%;
    background: #11161d;
    overflow: hidden;
}

.product-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-body {
    padding: 22px 24px 26px;
}

.product-name {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin: 0px 0px 10px;
}

/* Tipply is the one with a track record - say so without a second line. */
.product-since {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #00baff;
    border: 1px solid rgba(0, 186, 255, .35);
    border-radius: 10px;
    padding: 2px 9px;
    margin-left: 6px;
    vertical-align: middle;
}

.product-what {
    font-size: 14px;
    line-height: 24px;
    color: #777;
    margin-bottom: 12px;
}

/* The technical line is supporting evidence, not the pitch - it reads a
   step quieter than .product-what on purpose. */
.product-tech {
    font-size: 13px;
    line-height: 22px;
    color: #999;
    margin-bottom: 16px;
}

.product-link {
    font-size: 14px;
    color: #00baff;
    display: inline-block;
}

.product-link i {
    margin-left: 4px;
}

.product-link:hover,
.product-link:focus {
    color: #009bd6;
}

/* ----------------------------------------------------
   Pending card

   Dowzr has no screenshot yet (React Native - nothing to capture in a
   browser). Rather than hide the product or ship a broken image, the
   card holds its place with an obvious placeholder, so the gap is
   legible as "not finished" rather than "not built".

   The dashed frame and the muted link are the only things that differ
   from a finished card. Removing .is-pending and swapping the
   .product-pending div for an <img> completes it.
------------------------------------------------------- */
.product-card.is-pending {
    border-style: dashed;
    border-color: #d8d8d8;
    background: #fcfcfc;
}

.product-card.is-pending:hover {
    box-shadow: none;
    transform: none;
}

.product-pending {
    background: #f2f4f6;
    border-bottom: 1px dashed #dcdcdc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .product-shot is a padding-top box, so its children need to be pulled
   into the reserved space rather than laid out after it. */
.product-pending .product-pending-mark,
.product-pending .product-pending-text {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.product-pending-mark {
    top: 38%;
    font-size: 34px;
    color: #c2c8cf;
    line-height: 1;
}

.product-pending-text {
    top: 58%;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a8afb7;
}

.product-link.is-muted {
    color: #b0b6bd;
    cursor: default;
}

/* Bootstrap 3 floats columns, so equal-height cards need the row to be a
   flex container. Guarded to .product-lists so no other row is touched. */
@media (min-width: 768px) {
    .product-lists {
        display: flex;
        flex-wrap: wrap;
    }

    .product-lists > div {
        display: flex;
    }

    .product-card {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .product-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* Pin the link to the bottom so it lines up across cards whose copy
       runs to different lengths. */
    .product-link {
        margin-top: auto;
        align-self: flex-start;
    }
}