/* ---------------------------------------------------------------------------
   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: url('../images/header-background.jpg');
    --footer-bg: url('../images/footer.jpg');
    --hero-pad-top: 100px;
    --hero-inner-gap: 100px;
    --hero-logo-width: 500px;
    --nav-link: #bbbbbb;
    --nav-accent-scrolled: #feacb7;
    --menu-bg: #8baebf;          /* the burger panel under 768px */
}

/* ============================================================
   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: url("../images/background.jpg");
    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: 26px;
    line-height: 37px;
    position: relative;
    color: var(--nav-link);
}

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

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

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

.new-color .header-links li a:hover {
    color: var(--nav-accent-scrolled);
    transition: color 0.3s ease;
}

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

.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;
    justify-content: center;
    align-items: center;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    padding-top: var(--hero-pad-top);
}

.main-logo-img {
    width: var(--hero-logo-width);
    max-width: 100%;
    /* a short viewport shrinks the logo rather than pushing the links out of
       the hero; the logos range from 1.7:1 to 7:1 so only a height cap works */
    max-height: 45vh;
}

.main-logo-inner {
    display: flex;
    align-items: center;
    margin-top: min(var(--hero-inner-gap), 12vh);
}

.main-logo-inner span {
    color: #ffffff;
    font-size: 25px;
    padding: 0 20px 10px 0;
}

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

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

.main-logo-inner img {
    width: 200px;
    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;
    justify-content: center;
    align-items: center;

    iframe {
        width: 100%;
        max-width: 950px;
        aspect-ratio: 16 / 9;
        height: auto;
        border: none;
        border-radius: 30px;
    }
}

/* 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 {
    max-width: 405px;
    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: 400px;
    }

    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;
    }
}

/* One gallery for every page: a strip that scrolls sideways. Two caps do the
   layout. Height, so orientation sorts itself out - a landscape frame comes
   out wide, a portrait one narrow - and width, so a whole frame always fits
   inside the rail with the edge of the next one showing. That peek is one gap
   wide, and the gap is the only thing the breakpoints restate. */
.gallery-strip {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-top: 150px;
}

.team-presentation-images {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* not plain center: once the content is wider than the box, centring in
       flexbox puts the first frame out of reach of the scroller. "safe center"
       centres only while everything fits - a gallery of one image, say - and
       browsers that do not know it drop the line and keep flex-start. */
    justify-content: flex-start;
    justify-content: safe center;
    gap: 40px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* room for the scrollbar, so it never sits on top of an image */
    padding-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(105, 105, 105, 0.35) transparent;

    img {
        flex: 0 0 auto;
        /* both dimensions auto, both capped: an explicit height together with
           max-width does not keep the aspect ratio - it squashes the frame */
        width: auto;
        height: auto;
        max-height: min(620px, 75vh);
        max-width: calc(100% - 80px);
        border-radius: 24px;
        scroll-snap-align: start;
    }
}

.team-presentation-images::-webkit-scrollbar { height: 6px; }
.team-presentation-images::-webkit-scrollbar-track { background: transparent; }
.team-presentation-images::-webkit-scrollbar-thumb {
    background: rgba(105, 105, 105, 0.35);
    border-radius: 3px;
}

/* The arrows are wired up by js/gallery.js and stay hidden until it has run:
   a button that does nothing is worse than no button, and without the script
   the strip is still swipeable and scrollable. */
.gallery-strip-prev,
.gallery-strip-next {
    display: none;
    position: absolute;
    /* centred on the frame. Not on the rail: a horizontal scrollbar adds its
       own height there and pushes the buttons a few pixels low. gallery.js
       keeps --frame-h current, and the buttons only exist while it runs. */
    top: calc(var(--frame-h, 620px) / 2);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    color: #696969;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-strip.is-live .gallery-strip-prev,
.gallery-strip.is-live .gallery-strip-next { display: block; }

.gallery-strip-prev { left: -22px; }
.gallery-strip-next { right: -22px; }

.gallery-strip-prev:hover,
.gallery-strip-next:hover { transform: translateY(-50%) scale(1.08); }

.gallery-strip.at-start .gallery-strip-prev,
.gallery-strip.at-end .gallery-strip-next {
    opacity: 0;
    pointer-events: none;
}

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

    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: 450px; }
    .main-logo-inner { margin-top: 40px; }
    .main-logo-inner span, .main-logo-link { font-size: 24px; padding: 0 10px 5px 0; }
    .main-logo-inner img { width: 140px; margin-bottom: 0; margin-top: 2px; }
    .second-logo { height: 500px; }
    .team-presentation .main-img { width: 350px; }
    .team-presentation p.team-presentation-note { margin-top: 110px; }
    .gallery-strip { margin-top: 110px; }
    .team-presentation-images { gap: 30px; img { max-width: calc(100% - 60px); } }
    .team-video { margin-top: 110px; }
    .team-presentation-links { margin-top: 80px; 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) {
    /* a finger is the control here, so the arrows go away */
    .gallery-strip.is-live .gallery-strip-prev,
    .gallery-strip.is-live .gallery-strip-next { display: none; }

    /* 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: 350px; }
    .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; }
    .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-inner { max-width: 350px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
    .main-logo-inner a { 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: 320px; } p { max-width: 300px; margin: 20px 0 0; } p.team-presentation-note { margin-top: 90px; } }
    .gallery-strip { margin-top: 90px; }
    .team-presentation-images { gap: 24px; img { max-width: calc(100% - 48px); } }
    .team-video { margin-top: 90px; }
    .team-presentation-links { margin-top: 50px; }
    /* 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 10px 5px 0; }
    .main-logo-inner img { width: 120px; }
    .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; }
}