/* ---------------------------------------------------------------------------
   Page identity. Everything below this block is identical on every Ohi project
   page - edit it once and copy to all of them. Only these values, the images
   they point at, and the page content differ.
   --------------------------------------------------------------------------- */
:root {
    --hero-bg: none;              /* the hero plays a looping video instead (see the end of this file) */
    --footer-bg: url('../images/footer-pool.jpg');
    --hero-pad-top: 100px;
    --hero-logo-width: 600px;
    --nav-link: #bbbbbb;
    --menu-bg: #8baebf;          /* the burger panel under 768px */
    --page-bg: url('../images/background.jpg');
    --device-scale: 0.9;          /* the device shots under the text */
}

/* ============================================================
   Self-hosted Barlow — China-safe, no Google Fonts dependency.
   Font files live in /ohi/fonts/ at the site root.
   ============================================================ */
@font-face {
    font-family: "Barlow";
    src: url("../../ohi/fonts/Barlow-Thin-100.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../../ohi/fonts/Barlow-Light-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../../ohi/fonts/Barlow-Regular-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../../ohi/fonts/Barlow-SemiBold-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../../ohi/fonts/Barlow-Bold-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Barlow", sans-serif;
    background-image: var(--page-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #696969;
    display: inline-block;
}

a::after {
    content: "";
    display: block;
    width: 0;
    border-bottom: 1px solid #696969;
    transition: .3s;
}

a:hover::after {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

p {
    margin: 0;
}

img {
    display: block;
}

/* Side gutter. The wrapper and the block inside it each carry half of it,
   stepping 100 / 80 / 50 / 30 px per side at 1024, 768 and 425. Search for
   "Gutter ladder" to find the other three rungs. */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 50px;
}

.header {
    position: relative;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 101;
}

.header-logo img {
    width: 50px;
    transition: transform 0.3s ease;
}

.header-logo a:hover::after {
    width: 0;
}

.header-logo img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.header-menu-btn {
    position: fixed;
    top: 45px;
    /* matches .header-logo left, so the header sits evenly - it was 4%, which
       drifted from 51px to 58px across desktop widths */
    right: 40px;
    z-index: 100;
    width: 32px;
    height: 22px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.header-menu-btn span {
    position: absolute;
    width: 100%;
    top: 9px;
    border: 2px solid #ffffff;
    border-radius: 25px;
    transition: transform 0.3s ease;
}

.new-color .header-menu-btn span {
    border: 2px solid #696969;
}

.header-menu-btn span:first-child {
    top: 0;
}

.header-menu-btn span:last-child {
    top: 18px;
}

.change-btn span {
    opacity: 0;
}

.change-btn span:first-child {
    opacity: 1;
    top: 9px;
    transform: rotate(-45deg);
}

.change-btn span:last-child {
    opacity: 1;
    top: 9px;
    transform: rotate(45deg);
}

.header-links {
    position: fixed;
    top: 120px;
    right: 2.7%;
    z-index: 100;
    width: 200px;
    height: 0;
    overflow: hidden;
    text-align: end;
    padding: 0;
    transition: 0.3s ease;
}

.header-links li a {
    font-size: 18px;
    line-height: 26px;
    position: relative;
    color: #feacb7;
}

/* pink at rest, grey on hover: light grey over the hero, darker once the
   header has scrolled onto the page */
.header-links li a:hover {
    color: var(--nav-link);
    transition: color 0.3s ease;
}

.header-links li a::after {
    border-bottom: 1px solid var(--nav-link);
}

.new-color .header-links li a {
    color: #feacb7;
}

.new-color .header-links li a:hover {
    color: #696969;
    transition: color 0.3s ease;
}

.new-color .header-links li a::after {
    border-bottom: 1px solid #696969;
}

.header-links li a img {
    position: absolute;
    right: -32px;
    top: 0;
    transform: rotate(45deg);
}

.main-logo {
    width: 100%;
    /* min-height, not height: on a short viewport - a phone held sideways is
       375px tall - the logo plus the links under it were taller than the hero
       and spilled over the section below. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;

    /* The logo box, the gap under it and one line of text are centred as a
       group, and the content is laid from the top. So the line under the logo
       starts at padding + box + gap on every page - the same three numbers -
       whatever the logo's shape, the font, or a second line of links (iyo on a
       phone), which just hangs below. The three are fixed sizes, set once per
       breakpoint and never tied to the window's height: the group moves as one
       piece to stay centred, the logo and the line never move apart. */
    --logo-box: 204px;
    --logo-gap: 50px;
    --logo-line: 40px;
    justify-content: flex-start;
    padding-top: max(var(--hero-pad-top),
                     calc((100vh + var(--hero-pad-top) - var(--logo-box) - var(--logo-gap) - var(--logo-line)) / 2 - 80px));
}

.main-logo-img {
    width: var(--hero-logo-width);
    max-width: 100%;
    /* Every logo gets a box of the same height and stands on its bottom edge,
       so the gap under the logo is the same on every page and so is the height
       of the line under it. The box is as tall as the tallest logo, iyo's, so
       none is made smaller by it. A logo file must have no empty rows above or
       below the drawing - they would add to the gap - so iyo and Pool Assist
       use trimmed copies of their logos here (images/*-hero.png). */
    height: var(--logo-box);
    object-fit: contain;
    object-position: 50% 100%;
}

.main-logo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* twice the gap the hero's centring uses (padding-top above), so the
       logo stays where it is and only this line moves down */
    margin-top: calc(var(--logo-gap) * 2);
}

/* Spacing lives between the items of this line, never before the first or
   after the last: the box is centred, so any space on one side only pushes
   the visible text off the centre. */
.main-logo-inner span {
    color: #ffffff;
    font-size: 25px;
    padding-bottom: 10px;
}

/* a device or store logo straight after the text sits close to it */
.main-logo-inner span + img { margin-left: 20px; }

.main-logo-link {
    color: #ffffff;
    font-size: 25px;
    padding-bottom: 10px;
}

/* two links side by side - "Available now..." and "Press Pack" */
.main-logo-link + .main-logo-link { margin-left: 80px; }

.main-logo-inner a::after,
.main-logo-link::after {
    border-bottom: 1px solid #ffffff;
}

.main-logo-inner img {
    width: 160px;
    margin-bottom: 3px;
}

.main-logo,
.team {
    margin-bottom: 200px;
}

.team-inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 50px;
    margin: 200px auto 0;
}

.team-text {
    display: flex;
    justify-content: space-between;

    h3 {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 35px;
        margin-right: 20px;
        color: #696969;
        max-width: 500px;

        a {
            display: block;
            font-size: 22px;
            font-weight: 400;
            margin-top: 50px;

            img {
                width: 190px;
                margin-top: 20px;
            }

            img:hover {
                transform: scale(1.05);
                transition: 0.3s ease;
            }
        }

        a::after {
            width: 0;
        }
    }

    p {
        max-width: 560px;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 35px;
        color: #696969;

        span {
            display: block;
            margin-bottom: 30px;
        }

        span:last-child {
            margin-bottom: 0;
        }
    }
}

.team-text p:last-child {
    margin: 0;
}

.team-video {
    /* The block used to sit first in the container, so it never needed a top
       margin. Now that it follows the gallery it carries the same rhythm. */
    margin-top: 150px;
    width: 100%;
    display: flex;
    /* a column, for the optional title above the video */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* the title sits on the video's left edge */
    .team-video-title {
        width: 100%;
        max-width: 1000px;
        margin-bottom: 40px;
    }

    /* A YouTube embed, or the page's own video. The edges line up with the
       column like every other block. The embed is 16:9; a <video> keeps the
       shape of its file, from its width and height in the markup. */
    iframe,
    video {
        width: 100%;
        max-width: 1000px;
        height: auto;
        border: none;
        border-radius: 30px;
    }

    iframe { aspect-ratio: 16 / 9; }

    video {
        display: block;
        background-color: #000000;
    }

    /* the page's own video and the play button over it (js/video.js) */
    .team-video-frame {
        position: relative;
        width: 100%;
        max-width: 1000px;
    }

    /* the whole poster is the button; the circle in its middle is the clips'
       play button. Once the video plays, the browser's controls take over. */
    .team-video-play {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 30px;
        background: none;
        cursor: pointer;
    }

    .team-video-play:focus-visible { outline: 2px solid #696969; outline-offset: 3px; }
}

/* Vertical videos (Shorts-style). Add the class in the markup next to
   .team-video; the aspect ratio does the rest at every screen size. */
.team-video--portrait iframe,
.team-video--portrait video,
.team-video--portrait .team-video-frame,
.team-video--portrait .team-video-title {
    max-width: 405px;
}

.team-video--portrait iframe { aspect-ratio: 9 / 16; }

.team-presentation {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 50px;
    margin: 200px auto 0;

    /* Only the device shot. A bare `img` here also matches the gallery below,
       which is what the breakpoint copies of this rule used to break. */
    .main-img {
        width: calc(400px * var(--device-scale));
    }

    p {
        font-size: 16px;
        font-weight: 600;
        margin: 40px 0 0;
        color: #696969;
        max-width: 360px;
        text-align: center;
    }

    /* A caption that introduces a gallery rather than following the device
       shot - it keeps the gallery's own 150px rhythm above it. */
    p.team-presentation-note {
        margin-top: 150px;
    }
}

.team-presentation-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;

    h3 {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 40px;
        color: #696969;
        max-width: 360px;
    }

    /* The thumbnails sit in a plain unclassed <div> in the markup - that div
       is the row, so it is the one that has to be the flex container. */
    > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    a {
        transition: 0.3s ease;

        img {
            display: block;
            border-radius: 12px;
            width: 167px;
        }
    }

    a:after {
        width: 0;
    }

    a:hover {
        transition: 0.3s ease;
        transform: scale(1.05);
    }
}

.footer {
    background-image: var(--footer-bg);
    background-size: cover;
    background-repeat: no-repeat;
    /* 50px + the title's own 50px margin gives 100px of air at the top; the
       bottom matches it so the block sits evenly inside the footer */
    padding: 50px 50px 100px;

    a {
        color: #796767;
    }
}

.footer-container {
    margin: 0 auto;
    padding: 0 50px;
    max-width: 1300px;
}

.footer-title {
    font-size: 40px;
    text-align: center;
    font-weight: 400;
    color: #796767;
    margin-top: 50px;
}

.footer-social {
    margin-top: 80px;
    font-size: 22px;
}

.footer-links {
    margin-top: 35px;
    font-size: 22px;
}

.footer-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 36px;
}

.footer-social-logos {
    display: flex;
    align-items: center;
    gap: 36px;
}

.footer-social-logos img {
    width: 35px;
}

.footer-social-logos a:first-child img {
    margin-left: 0;
}

.footer-social-logos a {
    margin-right: 0;
}

.footer-social-logos a::after {
    border: none;
}

.footer-links {
    display: flex;
    align-items: end;
}

.footer-links a {
    margin-bottom: 15px;
    margin-right: 30px;
}

.footer-links a:last-child {
    margin-right: 0;
}

.footer-copy {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #796767;
    margin-top: 80px;
}

.footer-copy a {
    margin-right: 20px;
    display: block;
}

.footer-copy .footer-copy-text {
    margin-right: 20px;
    display: block;
}

.footer-copy span {
    display: block;
}

.footer-facebook-link img {
    width: 22px;
}

@media (max-width: 1300px) {
    .main-logo, .team { margin-bottom: 150px; }
    .team-presentation { margin: 150px 0; }
    .team-inner { max-width: 1000px; margin-top: 150px; }
    .team-text h3 { font-size: 28px; max-width: 360px; a { margin-top: 30px; } }
    .team-text p { font-size: 22px; max-width: 475px; }
}

@media (max-width: 1230px) {
    .team-text { flex-direction: column; align-items: center; h3 { max-width: 475px; } }
}

@media (max-width: 1024px) {
    /* Gutter ladder, rung 2 - see the note on .container. */
    .team-inner, .team-presentation, .footer-container { padding: 0 30px; }
    .header-links li a img { right: -29px; }
    .main-logo-img { width: 540px; }
    .main-logo { --logo-box: 153px; --logo-gap: 40px; --logo-line: 34px; }
    .main-logo-inner span, .main-logo-link { font-size: 24px; padding: 0 0 5px; }
    .main-logo-inner img { width: 112px; margin-bottom: 0; margin-top: 2px; }
    .second-logo { height: 500px; }
    .team-presentation .main-img { width: calc(350px * var(--device-scale)); }
    .team-presentation p.team-presentation-note { margin-top: 110px; }
    .team-video { margin-top: 110px; }
    .team-presentation-links { margin-top: 180px; h3 { font-size: 26px; margin-bottom: 35px; } > div { gap: 12px; } }
    .footer-title { font-size: 40px; margin-top: 20px; }
    /* keeps the footer symmetric: 50px padding + the title's 20px margin */
    .footer { padding-bottom: 70px; }
    .footer-social { margin-top: 50px; }
    .footer-email { margin-top: 0; }
    .footer-links { margin-top: 30px; }
    .footer-links a { margin-bottom: 0; }
    .footer-email, .footer-links { font-size: 20px; }
    .footer-social-logos img { width: 25px; }
    .footer-social-logos a:first-child img { margin-left: 0; }
    .footer-copy { font-size: 12px; margin-top: 35px; }
    .footer-facebook-link img { width: 16px; }
}

@media (max-width: 768px) {
    /* Gutter ladder, rung 3. */
    .container, .footer { padding-left: 30px; padding-right: 30px; }
    .team-inner, .team-presentation, .footer-container { padding: 0 20px; }
    .header-logo { top: 30px; left: 30px; }
    .main-logo-img { width: 420px; }
    .header-links { width: 100%; text-align: inherit; right: inherit; left: 0; top: 0; z-index: 20; padding-left: 30px; background-color: var(--menu-bg); }
    .header-links li { margin-bottom: 15px; }
    /* the full-screen panel: white text, scrolled or not */
    .header-links li a,
    .new-color .header-links li a { color: #ffffff; }
    .header-menu-btn { width: 26px; top: 40px; right: 30px; }
    .header-menu-btn span { border: 1px solid #ffffff; top: 7px; }
    .header-menu-btn span:last-child { top: 14px; }
    .change-btn span:first-child { top: 7px; }
    .change-btn span:last-child { top: 7px; }
    .main-logo, .team { margin-bottom: 100px; }
    .main-logo { --logo-box: 119px; --logo-gap: 30px; --logo-line: 30px; }
    .main-logo-inner { max-width: 350px; flex-wrap: wrap; justify-content: center; }
    /* the line may wrap here: a gap, not margins, so a wrapped line starts
       flush and both lines stay centred */
    .main-logo-inner { column-gap: 20px; row-gap: 6px; }
    .main-logo-link + .main-logo-link,
    .main-logo-inner span + img { margin-left: 0; }
    .team-inner { margin: 100px 0; }
    .team-text h3 { font-size: 26px; }
    .team-text p { font-size: 20px; }
    .team-presentation { margin: 100px 0; }
    .footer-title { font-size: 35px; }
    .footer-social { flex-direction: column; }
    .footer-social-logos { margin-top: 20px; }
    .footer-email, .footer-links { font-size: 20px; }
    .footer-links a { margin-right: 20px; }
}

@media (max-width: 550px) {
    .team-presentation { .main-img { width: calc(320px * var(--device-scale)); } p { max-width: 300px; margin: 20px 0 0; } p.team-presentation-note { margin-top: 90px; } }
    .team-video { margin-top: 90px; }
    .team-presentation-links { margin-top: 150px; }
    /* Two up instead of four stacked. Grid rather than flex percentages:
       two 50%-minus-half-the-gap flex items round up and drop to their own
       rows on some widths, a 1fr 1fr grid never does. */
    .team-presentation-links > div { display: grid; grid-template-columns: 1fr 1fr; }
    .team-presentation-links a img { width: 100%; }
    .footer-copy { flex-wrap: wrap; justify-content: space-evenly; a { margin: 0 5px 10px; } span { margin: 0 5px 10px; } .footer-copy-text { margin: 0 5px 10px; } }
}

@media (max-width: 500px) {
    .footer-email, .footer-links { font-size: 18px; }
}

@media (max-width: 425px) {
    /* Gutter ladder, rung 4. */
    .container, .footer { padding-left: 20px; padding-right: 20px; }
    .team-inner, .team-presentation, .footer-container { padding: 0 10px; }
    .header-logo { left: 20px; }
    .header-menu-btn { right: 20px; }
    .header-links { padding-left: 20px; }
    .main-logo { padding-bottom: 20px; }
    .main-logo-inner span, .main-logo-link { font-size: 20px; padding: 0 0 5px; }
    .main-logo-inner img { width: 96px; }
    .team-text h3 { font-size: 22px; margin-bottom: 20px; }
    .team-text p { font-size: 18px; margin-bottom: 20px; }
    .footer-copy { margin-top: 25px; }
    .footer-links { flex-direction: column; align-items: center; }
    .footer-links a { margin-right: 0; }
    .footer-copy-text { margin-right: 0; }
}

/* ===========================================================================
   TEMPLATE COMPONENTS
   The blocks the project-page templates are built from (the client's "Ohi
   Webs" comps). Every block sits in the same 1000px column as the video, so
   the left and right edges line up all the way down the page.

     .team-copy       a heading with its body underneath, both centred in
                      the column (the heading 800px wide); --intro is the
                      statement at the top of the page
     .team-devices    one device shot or a pair; a caption, a smaller note
                      under it and a button, all optional
     .team-features   three square frames, each with a caption
     .team-carousel   a titled strip with its arrows in the header, running
                      off the right edge of the window; --cards puts every
                      item on a card with a caption
     .team-stack      wide images one under another, title optional
     .team-rows       the features one at a time - a phone (.team-phone) on
                      one side, the text on the other
     .team-clips      a titled grid of portrait clips with play buttons

   .team-presentation styles any <p> inside it as the centred device caption,
   so the paragraphs here restate alignment, weight and width on purpose.
   =========================================================================== */

/* The carousels run from the column to the edge of the window, which takes
   100vw - and 100vw counts the scrollbar, so they overshoot by half of it.
   Clipping the section keeps that from turning into a sideways scroll. */
.team {
    overflow-x: hidden;
    overflow-x: clip;
}

.team-copy {
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;

    /* The heading is an 800px column, centred, the same width on every page
       whatever the copy; the text runs flush left and wraps inside it.
       text-wrap: pretty keeps a last line from being a single word. */
    .team-copy-title {
        max-width: 800px;
        margin-inline: auto;
        text-wrap: pretty;
        /* a set size, not one tied to the window's width: a narrower window
           wraps the heading onto more lines instead of shrinking it. It
           steps down only at the breakpoints where the body text does. */
        font-size: 54px;
        font-weight: 400;
        line-height: 1.15;
        color: #696969;
    }

    /* the body runs under the heading, narrower than it, centred too */
    .team-copy-body {
        max-width: 530px;
        margin: 60px auto 0;

        p {
            max-width: none;
            margin: 0 0 30px;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.7;
            text-align: left;
            color: #696969;
        }

        p:last-child { margin-bottom: 0; }
    }
}

/* doubled class: it has to outrank the rhythm rules in the breakpoints */
.team-copy.team-copy--intro { margin-top: 0; }

/* The device block: one shot or a pair side by side, caption optional. Each
   shot is the width the single device always was - 400 / 350 / 320 at the
   breakpoints - times the page's --device-scale; a pair shrinks to fit the
   column on a narrow screen. */
.team-devices {
    --device-w: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 150px 0 0;

    .team-devices-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(24px, 6vw, 80px);
        width: 100%;
    }

    img {
        flex: 0 1 auto;
        min-width: 0;
        width: calc(var(--device-w) * var(--device-scale));
        height: auto;
    }

    figcaption {
        margin-top: 60px;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        text-wrap: balance;
        color: #696969;
    }

    /* a smaller line under the caption */
    .team-devices-note {
        display: block;
        margin-top: 10px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5;
    }

    /* a pill button under the caption, in the page's own --cta-bg */
    .team-devices-cta {
        margin-top: 36px;
        padding: 14px 34px;
        border-radius: 999px;
        background-color: var(--cta-bg, #696969);
        color: #ffffff;
        font-size: 18px;
        line-height: 1.2;
        transition: transform 0.3s ease;
    }

    .team-devices-cta::after { display: none; }
    .team-devices-cta:hover { transform: scale(1.05); }
    .team-devices-cta:focus-visible { outline: 2px solid var(--cta-bg, #696969); outline-offset: 3px; }
}

.team-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;

    figure { margin: 0; }

    img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 12px;
    }

    figcaption {
        margin-top: 12px;
        font-size: 14px;
        text-align: center;
        color: #8c8c8c;
    }
}

.team-carousel {
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;
    /* the items size from the column (cqi), not from the track, which is
       wider because it runs on to the edge of the window */
    container-type: inline-size;
}

.team-carousel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.team-carousel .team-carousel-title,
.team-stack .team-stack-title,
.team-video .team-video-title {
    font-size: 34px; /* a set size, stepped down at the breakpoints */
    font-weight: 600;
    line-height: 1.2;
    color: #696969;
}

.team-carousel .team-carousel-subtitle {
    max-width: none;
    margin: 10px 0 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #8c8c8c;
}

/* revealed by js/carousel.js; without it the strip still scrolls and swipes */
.team-carousel-nav {
    display: flex;
    flex: none;
    gap: 10px;
    visibility: hidden;
}

.team-carousel.is-live .team-carousel-nav { visibility: visible; }

.team-carousel-nav button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #696969;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.team-carousel-nav button:hover:not(:disabled) { transform: scale(1.08); }

.team-carousel-nav button:disabled {
    opacity: 0.4;
    cursor: default;
}

.team-carousel-track {
    display: flex;
    gap: 20px;
    /* from the column's left edge to the edge of the window */
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.team-carousel-track::-webkit-scrollbar { display: none; }

/* mouse dragging, wired up by js/carousel.js */
@media (hover: hover) and (pointer: fine) {
    .team-carousel.is-live .team-carousel-track { cursor: grab; }
}

.team-carousel.is-dragging .team-carousel-track {
    cursor: grabbing;
    user-select: none;
}

.team-carousel-track img { -webkit-user-drag: none; }

/* lets the last item stop level with the column's right edge, not the window's */
.team-carousel-track::after {
    content: '';
    flex: none;
    width: max(0px, calc(50vw - 50cqi - 20px));
}

.team-carousel-track > img {
    flex: none;
    width: min(730px, 85vw);
    width: 73cqi;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    scroll-snap-align: start;
    /* a swipe or a trackpad flick stops at every item, like the arrows */
    scroll-snap-stop: always;
}

/* --cards: every item on a light card, picture above, caption below */
.team-carousel--cards .team-carousel-track > figure {
    flex: none;
    display: flex;
    flex-direction: column;
    width: 300px;
    width: calc((100cqi - 40px) / 3);
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 24px 20px 18px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.55);
    scroll-snap-align: start;
    scroll-snap-stop: always;

    img {
        flex: 1;
        min-height: 0;
        width: 100%;
        padding: 8% 10% 10%;
        object-fit: contain;
        object-position: 50% 100%;
        /* a soft floor shadow under the character, in the bottom padding */
        background: radial-gradient(ellipse 32% 5% at 50% 95%, rgba(0, 0, 0, 0.12), transparent 100%);
    }

    figcaption {
        margin-top: 12px;
        font-size: 13px;
        color: #8c8c8c;
    }
}

/* .team-stack: wide images one under another, each the full column, under
   an optional title - the carousel's title, corners and gaps */
.team-stack {
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;

    .team-stack-title { margin-bottom: 40px; }

    img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    img + img { margin-top: 20px; }
}

@media (max-width: 1024px) {
    .team-copy,
    .team-features,
    .team-carousel,
    .team-stack { margin-top: 110px; }
    .team-stack .team-stack-title,
    .team-video .team-video-title { margin-bottom: 30px; }
    .team-devices { margin-top: 110px; --device-w: 350px; }
    .team-devices figcaption { margin-top: 40px; font-size: 22px; }
    .team-copy .team-copy-body { margin-top: 40px; }
    .team-carousel-head { margin-bottom: 30px; }
}

@media (max-width: 768px) {
    /* the heading and the body go full width and line up on the left */
    .team-copy .team-copy-title { margin-inline: 0; }
    .team-copy .team-copy-body { max-width: none; margin-inline: 0; }
    .team-copy .team-copy-body p { font-size: 17px; }
    .team-copy .team-copy-title { font-size: 42px; }
    /* .team first: these come before the clips rule in the file */
    .team .team-carousel .team-carousel-title,
    .team .team-stack .team-stack-title,
    .team .team-video .team-video-title,
    .team .team-clips .team-clips-title { font-size: 28px; }
    .team-carousel-track > img { width: 85cqi; }
    .team-carousel--cards .team-carousel-track > figure { width: calc((100cqi - 20px) / 2.3); }
}

@media (max-width: 550px) {
    .team-copy,
    .team-features,
    .team-carousel,
    .team-stack { margin-top: 90px; }
    .team-stack .team-stack-title,
    .team-video .team-video-title { margin-bottom: 20px; }
    .team-stack img + img { margin-top: 12px; }
    .team-devices { margin-top: 90px; --device-w: 320px; }
    .team-devices figcaption { margin-top: 24px; font-size: 18px; }
    .team-devices .team-devices-note { font-size: 16px; }
    .team-devices .team-devices-cta { margin-top: 28px; padding: 12px 28px; font-size: 16px; }
    .team-copy .team-copy-body { margin-top: 24px; }
    .team-copy .team-copy-body p { font-size: 16px; margin-bottom: 20px; }
    .team-copy .team-copy-title { font-size: 34px; }
    /* .team first: these come before the clips rule in the file */
    .team .team-carousel .team-carousel-title,
    .team .team-stack .team-stack-title,
    .team .team-video .team-video-title,
    .team .team-clips .team-clips-title { font-size: 24px; }
    .team-carousel-head { margin-bottom: 20px; }
    .team-carousel .team-carousel-subtitle { font-size: 15px; }
    .team-carousel-nav button { width: 36px; height: 36px; }
    .team-carousel-track { gap: 12px; }
    .team-carousel-track::after { width: max(0px, calc(50vw - 50cqi - 12px)); }
    .team-carousel--cards .team-carousel-track > figure { width: 62cqi; padding: 18px 16px 14px; }

    /* three squares side by side are too small on a phone, so the row turns
       into a strip you swipe, the same as the carousels */
    .team-features {
        display: flex;
        gap: 12px;
        width: auto;
        align-self: stretch;
        margin-right: calc(50% - 50vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        figure { flex: 0 0 72%; scroll-snap-align: start; scroll-snap-stop: always; }
    }

    .team-features::-webkit-scrollbar { display: none; }
}

/* a line under the intro body for a store badge - "Coming soon on" + badge */
.team-copy .team-copy-store {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #696969;

    img {
        width: 150px;
        height: auto;
    }
}

/* .team-rows: the features one at a time - a phone on one side, its text on
   the other, changing sides from row to row */
.team-rows {
    display: flex;
    flex-direction: column;
    gap: 150px;
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;
}

.team-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 40px;
}

/* every second row puts the phone on the right */
.team-row:nth-child(even) .team-phone { order: 2; }

.team-row .team-row-text {
    max-width: 400px;

    p {
        max-width: none;
        margin: 16px 0 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.7;
        text-align: left;
        color: #696969;
    }

    .team-row-label {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #8c8c8c;
    }
}

.team-row .team-row-title {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #696969;
}

/* a phone drawn in CSS around a screen recording */
.team-phone {
    position: relative;
    justify-self: center;
    width: 300px;
    max-width: 100%;
    padding: 8px;
    border-radius: 42px;
    background-color: #161616;
    box-shadow: inset 0 0 0 2px #444, 0 24px 50px rgba(0, 0, 0, 0.18);

    img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        border-radius: 34px;
    }
}

/* the camera island */
.team-phone::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 1;
    width: 28%;
    height: 22px;
    border-radius: 11px;
    background-color: #161616;
    transform: translateX(-50%);
}

/* .team-clips: a titled grid of portrait clips. Each is a poster with a play
   button; js/clips.js runs the clip in place and stops it on a second press. */
.team-clips {
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;
}

.team-clips .team-clips-title {
    margin-bottom: 40px;
    font-size: 34px; /* a set size, stepped down at the breakpoints */
    font-weight: 600;
    line-height: 1.2;
    color: #696969;
}

.team-clips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.team-clip {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: none;
    cursor: pointer;

    img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        object-fit: cover;
    }
}

/* the play button over the poster; it fades out while the clip runs. The
   page's own videos use the same button (.team-video-play). */
.team-clip::after,
.team-video-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23696969'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.team-clip:hover::after,
.team-video-play:hover::after { transform: translate(-50%, -50%) scale(1.08); }
.team-clip.is-playing::after { opacity: 0; }
.team-clip.is-loading::after { animation: team-clip-wait 0.9s ease-in-out infinite alternate; }
.team-clip:focus-visible { outline: 2px solid #696969; outline-offset: 3px; }

@keyframes team-clip-wait { to { opacity: 0.45; } }

@media (max-width: 1024px) {
    .team-rows,
    .team-clips { margin-top: 110px; }
    .team-rows { gap: 110px; }
    .team-phone { width: 260px; }
    .team-clips .team-clips-title { margin-bottom: 30px; }
    .team-clips-grid { gap: 20px; }
}

@media (max-width: 768px) {
    /* one column: the phone above its text, on every row */
    .team-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .team-row:nth-child(even) .team-phone { order: 0; }
    .team-row .team-row-text { max-width: none; }
}

@media (max-width: 550px) {
    .team-rows,
    .team-clips { margin-top: 90px; }
    .team-rows { gap: 90px; }
    .team-phone { width: 230px; padding: 7px; border-radius: 36px; }
    .team-phone img { border-radius: 29px; }
    .team-row .team-row-title { font-size: 24px; }
    .team-row .team-row-text p { font-size: 16px; }
    .team-clips .team-clips-title { margin-bottom: 20px; }
    /* three clips across stay readable down to here; on a phone, two */
    .team-clips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .team-clip::after,
    .team-video-play::after { width: 46px; height: 46px; background-size: 18px; }
    .team-copy .team-copy-store { margin-top: 20px; font-size: 15px; }
    .team-copy .team-copy-store img { width: 130px; }
}

/* The hero plays a looping video behind the logo instead of a background
   image - the same rules as on the IYO and Airmeter pages. */
.main-logo {
    position: relative;
}

.main-video-background {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    /* follows the hero, which can grow past 100vh */
    height: 100%;
    object-fit: cover;
}