/* ====== FONTS (global) ====== */
@font-face {
  font-family: "PPNeueMontrealBook";
  src: url("/assets/fonts/montreal/PPNeueMontreal-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PPNeueMontreal";
  src: url("/assets/fonts/montreal/PPNeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "PPNeueMontreal";
  src: url("/assets/fonts/montreal/PPNeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}





@font-face {
  font-family: "Whyte";
  src: url("/assets/fonts/whyte/Whyte-Regular.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: "Whyte";
  src: url("/assets/fonts/whyte/Whyte-Medium.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Whyte";
  src: url("/assets/fonts/whyte/Whyte-Bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
}





@font-face {
  font-family: "PTSerif";
  src: url("/assets/fonts/PT/PTSerif-Italic.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
}











/* Global body – updated to the new white look */
body {
    margin: 0;
    font-family: "PPNeueMontreal", sans-serif;
    color: #000;
    background: #fff;
    line-height: 1.35;
    padding-top: 70px;   /* adjust to navbar height */

}

/* Shared container */
.container {
    width: 88%;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

/* .home-grey-wrap { background: #f3f3f3; }*/

/* HOME – Latest from Koperativa CTA (reuse project-next-link look) */
.home-see-work-link{
  margin-left: auto;           /* lets it sit to the right if inside a flex row */
  white-space: nowrap;

}

.home-see-work-link .project-next-link-text{
  font-weight: 400;            /* matches screenshot */
}



/* HOME – Latest from Koperativa CTA: make it heavier */
.home-see-work-link .project-next-link-text{
  font-family: "PPNeueMontreal", sans-serif; /* IMPORTANT: use the family that has 500/700 */
  font-weight: 500 !important;              /* Medium */
}


body.service-page{
  overflow-x: hidden;
}

/* ============================
   // WORK //
   ============================ */

/* Intro text block */
.work-intro {
    padding-top: 90px;
    padding-bottom: 0px;
    margin: 20px 220px 0 0;
    
}

.bodymain p {
    font-size: 22px;
    max-width: 950px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.45;
}





/* ============================
   EDITORIAL BODY TEXT (shared)
   News Blog article body + Our Story body blocks
   ============================ */

.editorial-body p,
.editorial-body li{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  line-height: 1.45;
  max-width: 950px;
  margin: 0 0 1.2em 0;   /* nice paragraph rhythm */
  color: #000;
}



/* Separator line under intro, full-width inside container */
.work-separator {
    height: 1px;
    width: 100%;
    background-color: #000;
    margin-bottom: 60px;
}

/* Page title */
.title-Head h2 {
    font-family: "Whyte", sans-serif;
    font-size: 64px;
    font-weight: 400;
    margin: 0 0 40px;
    margin-top: 0px;
}



/* WHAT WE DO — reduce space between title and paragraph */
.what-we-do--plain .title-Head h2{
  margin-bottom: 12px; /* try 12–24 */
}


/* Filters row */
.work-header {
    /* space between title & filters is already 40px from h2 margin-bottom
       and filters margin-bottom below */
}

.work-filters {
    margin-bottom: 119px;
    font-size: 18px;
}

.work-filters-inner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
}

.work-filters-dash{
  margin-top: 12px; /* tweak 10–14 depending on font */
}


/* small dash between "All" and the other filters */
.work-filters-dash {
    width: 15px;
    height: 1px;
    background-color: #000;
    display: inline-block;
}

/* Filter links */
.work-filter-link {
    position: relative;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    padding-bottom: 4px;
    transition: color 0.25s ease;
}

.work-filter-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    width: 100%;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

/* active / hover – same feeling as navbar links */
.work-filter-link:hover,
.work-filter-link.is-active {
    color: #000;
}

.work-filter-link:hover::after,
.work-filter-link.is-active::after {
    transform: scaleX(0.6); /* grows from left towards centre */
}

/* Projects grid (from your provided CSS, lightly adjusted) */
.latest-projects {
    padding: 0 0 40px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 40px;
}

.project-card {
    text-decoration: none;
    color: #000;
    display: block;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.project-img {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-card:hover img {
    transform: scale(1.0);
}

.project-title {
    font-family: "PPNeueMontrealBook", sans-serif;
    font-size: 22px;
    margin-top: 20px;
    font-weight: 400;
}

.project-subtitle {
    font-family: "PPNeueMontrealBook", sans-serif;
    font-size: 16px;
    font-weight: 400;
    opacity: .6;
    margin-top: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* TESTING */


/* ============================
   PROJECT CARDS – unify HOME + WORK
   ============================ */

.project-card{
  text-decoration: none;
  color: #000;
  display: block;
}

.project-img{
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.project-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.project-card:hover img{
  transform: scale(1.0);
}

.project-title{
  font-size: 22px;
  margin-top: 16px;
  margin-bottom: -1px;
  font-weight: 400;
}

.project-subtitle{
  font-size: 16px;
  font-weight: 400;
  opacity: .6;
  margin-top: 4px;
  margin-bottom: 50px;
  letter-spacing: .5px;
  text-transform: uppercase;
}






/* TESTING */



/* ============================
   HOME – tighten spacing around "See more projects"
   ============================ */

/* Reduce space after last project card (HOME only) */
.home-work-section .project-subtitle{
  margin-bottom: 24px;
}

/* Reduce space above the button */
.home-work-cta{
  margin-top: 00px;
    margin-bottom: 00px;
}

/* Reduce space below the button before next section */
.home-work-section{
  padding-bottom: 40px;
}







/* TESTING */





/* reveal-on-scroll state */
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* spacing before footer */
.work-bottom-spacer {
    padding-bottom: 110px;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
    .title-Head h2 {
        font-size: 48px;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .work-intro {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-img {
        height: 220px;
    }

    .title-Head h2 {
        font-size: 40px;
    }

    .work-filters-inner {
        gap: 12px;
    }
}






/* Work filters – match reference (lighter + not bold) */
.work-filters-row .filters-list button,
.work-filters-row .work-filter-all button{
    font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
  color: rgba(0,0,0,0.55);
}

/* Active + hover */
.work-filters-row .filters-list button.active,
.work-filters-row .filters-list button:hover,
.work-filters-row .work-filter-all button.active,
.work-filters-row .work-filter-all button:hover{
  font-weight: 500;
  color: #000;
}



/* ============================
   // PROJECT PAGE //
   ============================ */

.project-container {
    /* same central 1150px effect via .container */
}

/* --- Header strip --- */

.project-header-strip {
    padding-top: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.project-header-left {
    display: flex;
    align-items: center;
}

.project-client-logo {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-client-logo--placeholder {
    border: 1px solid #ccc;
}

.project-header-divider {
    width: 1px;
    height: 48px;
    background: #000;
    margin-left: 40px;
    margin-right: 40px;
}

.project-client-name {
    font-size: 22px;
    font-weight: 900;
}

/* --- Share button (styled like SAY HELLO) --- */

.share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 26px;
    border-radius: 999px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-family: "PPNeueMontreal", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.share-btn-label {
    position: relative;
    z-index: 1;
}

.share-btn-icons {
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* cleaned-up icons – no extra boxes */
.share-icon {
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* kill old pseudo-element boxes completely */
.share-icon::before,
.share-icon-fb::before,
.share-icon-li::before,
.share-icon-x::before,
.share-btn:hover .share-icon::before {
    content: none;
}

/* Hover state like navbar button */
.share-btn:hover {
    background: #000;
    color: #fff;
}

.share-btn:hover .share-btn-icons {
    opacity: 1;
    transform: translateY(0);
}

/* --- Project title --- */

.project-title-section {
    padding-top: 90px;
    padding-bottom: 0;
}

.project-page-title {
    font-family: "Whyte", sans-serif;
    font-size: 50px;
    font-weight: 400;
    margin: 0;
}

/* --- Content blocks --- */

.project-content {
    padding-top: 90px;
}

.project-block {
    margin-bottom: 110px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* reuse reveal-visible from Work page */
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* single large image */
.project-image-single img {
    width: 100%;
    height: auto;
    display: block;
}

/* twin images */
.project-image-double-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.project-image-double-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Vimeo video – 16:9 ratio wrapper */
.project-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.project-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- Separator before Next Project --- */

.project-next-separator {
    height: 1px;
    background: #000;
    width: 100%;
    margin-top: 0;
    margin-bottom: 110px;
}

/* --- Next Project heading --- */

.project-next-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.project-next-label {
    font-family: "Whyte", sans-serif;
    font-size: 75px;
    font-weight: 400;
    line-height: 1;
}

/* See Work + arrow */
/* See Work + arrow */

.project-next-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    position: relative;
}

.project-next-link-icon .circle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* NEW: image arrow (from /assets/img/arrow.svg) */
.project-next-link-icon .arrow-img {
    width: 23px;                 /* smaller + closer to reference */
    height: 23px;
    display: block;
    object-fit: contain;
    transition: transform 0.35s ease;
    transform: translateX(0);
}

/* hover: arrow slides right out and re-enters from left */
.project-next-link:hover .circle .arrow-img {
    animation: arrow-slide-loop 0.5s forwards;
}

@keyframes arrow-slide-loop {
    0%   { transform: translateX(0); }
    49%  { transform: translateX(140%); }
    50%  { transform: translateX(-140%); }
    100% { transform: translateX(0); }
}


/* --- Next project preview images --- */

.project-next-images {
    display: flex;
    gap: 25px;
    margin-top: 0;
}

.project-next-image-item {
    display: block;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.project-next-image-inner {
    height: 315px;
    overflow: hidden;
}

.project-next-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- spacing before footer --- */

.project-bottom-spacer {
    padding-bottom: 110px;
}

/* --- Responsive tweaks --- */

@media (max-width: 1024px) {
    .project-header-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .project-next-label {
        font-size: 56px;
    }

    .project-next-images {
        flex-direction: column;
        gap: 20px;
    }

    .project-next-image-inner {
        height: 260px;
    }
}

@media (max-width: 640px) {
    .project-header-strip {
        padding-top: 90px;
    }

    .project-header-divider {
        margin-left: 20px;
        margin-right: 20px;
    }

    .project-client-name {
        font-size: 18px;
    }

    .project-page-title {
        font-size: 36px;
    }

    .project-next-label {
        font-size: 40px;
    }

    .project-next-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .project-next-images {
        gap: 16px;
    }

    .project-next-image-inner {
        height: 220px;
    }

    .project-image-double-wrap {
        grid-template-columns: 1fr;
    }
}

.page-wrap {
    padding-top: 60px !important;
}

/* ============================
   // CAREER PAGE //
   ============================ */

.career-page {
    display: flex;
    align-items: center;
    padding: 110px 0 130px;
    background-color: #ffffff;
}

.career-empty {
    width: 100%;
}

.career-empty__content {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.career-empty__title {
    font-family: "PPNeueMontreal-Book", sans-serif;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 24px;
    color: #000000;
}

.career-empty__text {
    font-size: 22px;
    line-height: 1.7;
    margin: 0 0 40px;
    color: #707070;
}

.career-empty__email {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding-bottom: 2px;
}

.career-empty__email:hover {
    border-bottom-color: rgba(0, 0, 0, 0.7);
}

.career-empty__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 22px 46px;
    border-radius: 999px;
    background-color: #000000;
    color: #ffffff;
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
}

.career-empty__button:hover {
    background-color: #000000;
}

@media (max-width: 640px) {
    .career-page {
        padding: 90px 0 110px;
        align-items: flex-start;
    }

    .career-empty__title {
        font-size: 34px;
    }

    .career-empty__text {
        font-size: 16px;
    }

    .career-empty__button {
        width: 100%;
    }
}

/* ============================
   NEWS & BLOG – LIST PAGE
   ============================ */

.news-blog-page {
    /* Nothing special yet – page-level hook if needed */
}

/* Hero section */
.news-blog-hero {
    padding-top: 180px;
    padding-bottom: 180px;
    text-align: center;
}

.news-blog-hero .blog-text {
    font-size: 22px;
    line-height: 1.7;
    margin: 0 0 40px;
    color: #707070;
}

.news-blog-hero .title-Blogs {
    font-family: "Whyte", sans-serif;
    font-size: 64px;
    font-weight: 400;
    margin: 0 0 40px;
}

/* Grey background wrapper */
.news-blog-bg {
    background-color: #efefef;
    padding-top: 60px;   /* 60px into grey background the grid starts */
    padding-bottom: 100px;
}

/* Blog grid CSS */
.latest-blogs {
    padding: 0 0 40px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-bottom: 40px;
}

.blog-card {
    text-decoration: none;
    color: #fff
}
    
    
    
    
    
    
    
/* ============================
   ABOUT PAGE
/* ============================
   ABOUT PAGE
   ============================ */

/* Hide the extra language pill (navbar already handles language) */
.lang-pill {
    display: none;
}

/* ABOUT HERO – centered heading + copy + text CTA */
.hero {
    padding: 80px 0 90px;   /* REDUCED: closer to navbar */
    text-align: center;
}

/* Title */
.hero h1 {
    margin: 0 0 32px;
    font-family: "Whyte", sans-serif;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* Intro paragraph */
.hero p {
    max-width: 860px;
    margin: 0 auto 36px;
    font-size: 18px;
    line-height: 1.7;
    color: #000;
}

/* CTA – text link (NOT a pill) */
.cta {
    margin-top: 0;
    display: inline-block;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    font-family: "PPNeueMontrealBook", sans-serif;
    font-size: 18px;
    font-weight: 400;

    text-transform: none;
    letter-spacing: 0;

    color: #000;
    text-decoration: none;

    border-bottom: 2px solid #000;
    padding-bottom: 3px;
}

/* No hover pill effect */
.cta:hover {
    background: transparent;
}














/* GALLERY – full-width band under the hero */
.about-gallery {
    position: relative;
    height: 830px;
    margin: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw); /* break out of .container */
    background: #000;
    overflow: hidden;
}

.about-gallery .slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.about-gallery .slide.active {
    opacity: 1;
}

.about-gallery .fade-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 85%,
        #fff 100%
    );
}

/* BASE SECTION LAYOUT */
.section {
    padding: 90px 0;
    border-top: none;
}

/* Section titles */
.section h2 {
    margin: 0 0 24px;
    font-family: "Whyte", sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Specific section backgrounds to mimic original page */
#what-we-do {
    background-color: #efefef;
}

#our-clients {
    background-color: #ffffff;
}

#team {
    background-color: #efefef;
}

#awards {
    background-color: #ffffff;
}

/* Two-column layout used in WHAT WE DO and OUR CLIENTS */
.two-col {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* Services grid (WHAT WE DO right column) */
.grid {
    display: grid;
    gap: 14px;
}

.grid.services {
    grid-template-columns: 1fr;
}

.service-card a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #ddd;
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.service-card:first-child a {
    border-top: none;
}

.service-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

/* ============================
   TEAM (Meet the team) – match reference
   ============================ */

/* Force Book inside team section */
#team,
#team * {
    font-family: "PPNeueMontrealBook", sans-serif;
}

/* Make sure the section title stays uppercase (MEET THE TEAM) */
#team h2 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Join our team should be a text link (not a pill) inside team section */
#team .cta {
    margin-top: 0;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0;
    display: inline-block;
    color: #000;
    border-bottom: 2px solid #000;
    padding-bottom: 3px;
}

/* TEAM GRID */
.grid.team {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.team-card {
    text-align: left;
    border: none;
    padding: 0;
}

.team-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    margin-bottom: 16px; /* slightly more breathing room like reference */
}

.team-card .name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #000;
}

.team-card .pos {
    color: #707070;
    font-size: 14px;
    font-weight: 400;
    text-transform: none; /* IMPORTANT: no uppercase */
    letter-spacing: 0;
}





/* ============================
   ABOUT – TEAM SECTION (matches /about/index.php markup)
   ============================ */

/* Title: force uppercase */
.team-section .title-Head h2{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 900px;
}

/* Space between intro paragraph -> Join our team -> grid (fixes “stuck” CTA) */
.team-section .see-services-wrap{
  margin-top: 40px;     /* space from intro text */
  margin-bottom: 55px;  /* space before the photos */
}

/* Join our team should look like a text link, not a pill */
.team-section .see-services-wrap .see-work-btn{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;

  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 24px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;

  color: #000;
  display: inline-block;
  border-bottom: 2px solid #000;
  padding-bottom: 1px;
}

/* Grid (your markup uses .team-grid + .team-member) */
.team-section .team-grid{
  margin-top: 0; /* CTA wrapper now controls spacing */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* Images: force identical crop + consistent height across members */
.team-section .team-member img{
  width: 100%;
  aspect-ratio: 3.45 / 4;   /* ensures equal card heights */
  height: auto;
  object-fit: cover;     /* crops to fit */
  display: block;
  margin-bottom: 16px;
}

/* Name (you are using h3.project-title) */
.team-section .team-member .project-title{
  font-family: "PPNeueMontreal-Bold", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px 0;     /* slightly more breathing room */
  color: #000;
}

/* Position (you are using p.project-subtitle) */
.team-section .team-member .project-subtitle{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: #707070;

  text-transform: none;
  letter-spacing: 0;
  opacity: 1; /* override the global project-subtitle opacity */
}

/* Responsive */
@media (max-width: 1024px){
  .team-section .team-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .team-section .team-grid{ grid-template-columns: 1fr; }
}




/* QUIT HERE */





/* AWARDS TABLE */
.awards-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
    font-size: 13px;
}

.awards-table th,
.awards-table td {
    border-top: 1px solid #e0e0e0;
    padding: 10px 6px;
    text-align: left;
    vertical-align: top;
}

.awards-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #707070;
    border-bottom: 1px solid #000;
}

.awards-table td:last-child,
.awards-table th:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ============================
   ABOUT PAGE (second part)
   ============================ */

.about-section {
    padding-top: 140px;
    padding-bottom: 120px;
    background-color: #ffffff;
}

.about-section .title-Head h2 {
    text-align: center;
}

.about-section .bodymain p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-section .see-services-wrap {
    text-align: center;
    margin-top: 32px;
}

.see-work-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* PHOTO SLIDER under hero – full-width image band */
.photo-slider {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* break out of .container */
    background: #000;
}

.photo-slider .slider-wrapper {
    position: relative;
    height: 830px;
    overflow: hidden;
}

.photo-slider .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.photo-slider .slide.active {
    opacity: 1;
}




/* ============================
   WHAT WE DO
   (Make ABOUT identical to HOME)
   ============================ */

/* --- Legacy (non-plain) What We Do styles: keep them from affecting the plain version --- */
.what-we-do:not(.what-we-do--plain){
  background-color: #efefef;
  padding: 110px 0;
}

.what-we-do:not(.what-we-do--plain) .what-wrapper{
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 900px){
  .what-we-do:not(.what-we-do--plain) .what-wrapper{
    grid-template-columns: 1fr;
  }
}

.what-we-do:not(.what-we-do--plain) .title-Head h2{ margin-bottom: 24px; }
.what-we-do:not(.what-we-do--plain) .bodymain p{ margin-bottom: 24px; }

.what-we-do:not(.what-we-do--plain) .what-right{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.what-we-do:not(.what-we-do--plain) .service-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #dcdcdc;
  text-decoration: none;
  color: #000;
  font-size: 16px;
}

.what-we-do:not(.what-we-do--plain) .service-row:first-child{ border-top: none; }

.what-we-do:not(.what-we-do--plain) .circle-btn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}


/* --- PLAIN version (this is what your Home AND About include uses) --- */
/* Section wrapper */
.what-we-do.what-we-do--plain{
  background-color: #efefef;
  padding: 110px 0;
}

/* Layout: identical on Home + About */
.what-we-do--plain .what-wrapper{
  display: grid;
  grid-template-columns: 1.1fr 1fr;  /* match homepage */
  gap: 60px;                         /* match homepage */
  align-items: flex-start;
}

@media (max-width: 900px){
  .what-we-do--plain .what-wrapper{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Left title + text (keep your existing styles, just ensure clean rhythm) */
.what-we-do--plain .title-Head h2{
  text-transform: uppercase;
}

/* CTA: See all services (same as homepage) */
.what-we-do--plain .what-seeall{
  display: inline-block;
  margin-top: 26px;
  font-size: 24px;
  color: #000;
  text-decoration: none;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
}

/* Services list wrapper: remove the “push right” so About matches Home */
.what-we-do--plain .whatwedo-services{
  margin-left: 0;                 /* IMPORTANT */
  max-width: 720px;               /* same feel as homepage */
  border-top: 1px solid #d6dde3;
  border-bottom: 1px solid #d6dde3;
}

/* Rows: identical styling */
.what-we-do--plain .service-row--plain{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #d6dde3;
  text-decoration: none;
  color: #000;
}

.what-we-do--plain .service-row--plain:last-child{
  border-bottom: none;
}

/* Labels: Book, same size */
.what-we-do--plain .service-row-label{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  font-weight: 400;
}

/* Arrow: same size + lighter, with hover */
.what-we-do--plain .service-row-arrow img{
  width: 24px;
  height: 24px;
  opacity: 0.55;
  display: block;
}

.what-we-do--plain .service-row--plain:hover .service-row-arrow img{
  opacity: 1;
}

/* Homepage – reduce top spacing before WHAT WE DO */
.home-page .what-we-do{
    margin-top: 0;
    padding-top: 40px; /* adjust this value */
    padding-bottom:110px
}



/* ============================
   OUR CLIENTS – unified (HOME + ABOUT)
   Wrapper used in your code: .clients-title
   ============================ */

.clients-title{
  background-color: #ffffff;
  padding: 110px 0 40px;
}

/* Title — force the correct look */
.clients-title .title-Head h2,
.clients-title h2{
  font-family: "Whyte", sans-serif;
  font-size: 64px;
  font-weight: 400;
  text-transform: uppercase !important;
  letter-spacing: 0.018em !important;

  margin: 0 0 32px 0 !important;
}

/* Paragraph — readable width + same rhythm everywhere */
.bodymain p {
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 200;


  max-width: 1150px !important;  /* keeps it from becoming too wide */
  margin: 0 !important;         /* left aligned like your reference */
}










/* OUR CLIENTS – video band */
.hero {
    background-color: #ffffff;
    padding-bottom: 40px;
}

.hero-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* TEAM SECTION */
.team-section {
    background-color: #fff;
    padding: 110px 0 120px;
}

.team-section .title-Head h2 {
    margin-bottom: 24px;
}

.team-section .bodymain p {
    max-width: 900px !important;
    
}

.team-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
}

.team-member img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
}

.team-member h3.project-title {
    margin: 0 0 4px;
    font-size: 16px;
}

.team-member .project-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #707070;
}





/* ============================
   AWARDS – COLUMN-SPECIFIC TYPOGRAPHY (FINAL)
   ============================ */

/* Header row */
.awards-section .award-header{
  font-family: "PPNeueMontreal", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  padding-bottom: 16px;
  border-bottom: 1px solid #000;
}

/* Base row text (default = Book) */
.awards-section .award-row{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  padding: 28px 0;
  border-bottom: 1px solid #d6dde3;
}

/* Make all cells inherit the base row style */
.awards-section .award-row > div{
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---- COLUMN OVERRIDES ---- */
/* 1) ORGANIZATION column must NEVER be bold */
.awards-section .award-row .award-org,
.awards-section .award-row .award-org *{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400 !important;
}

/* 2) PROJECTS column should be the “bold” one */
.awards-section .award-row .award-project,
.awards-section .award-row .award-project *{
  font-family: "PPNeueMontreal", sans-serif;
  font-weight: 700 !important;
}

/* 3) AWARD column stays normal body */
.awards-section .award-row .award-name,
.awards-section .award-row .award-name *{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400 !important;
}

/* 4) YEAR column normal + right aligned */
.awards-section .award-row .award-year,
.awards-section .award-row .award-year *{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400 !important;
  text-align: right;
}

/* Safety: if any <strong>/<b> exists in the org/award/year columns, neutralize it */
.awards-section .award-org strong,
.awards-section .award-org b,
.awards-section .award-name strong,
.awards-section .award-name b,
.awards-section .award-year strong,
.awards-section .award-year b{
  font-family: inherit;
  font-weight: 400 !important;
}



/* ============================
   AWARDS – SECTION SPACING
   ============================ */

.awards-section{
  margin-top: -20px;    /* space above the whole block */
  margin-bottom: 110px; /* space below the whole block */
}


/* ============================
   AWARDS – FIX GRID (header + rows aligned)
   ============================ */

/* Same grid for header + each row */
.awards-section .award-header,
.awards-section .award-row{
  display: grid !important;
  grid-template-columns: 1.25fr 1.15fr 2.2fr 0.4fr; /* org | projects | award | year */
  column-gap: 48px;
  align-items: start;
}

/* Header styling stays in the same grid */
.awards-section .award-header{
  padding: 18px 0 16px;
}

/* Rows spacing */
.awards-section .award-row{
  padding: 30px 0;
}

/* Keep YEAR on the far right */
.awards-section .award-header > div:last-child,
.awards-section .award-row .award-year{
  text-align: right;
  white-space: nowrap;
}

/* Prevent weird wrapping in the header labels */
.awards-section .award-header > div{
  white-space: nowrap;
}

/* Mobile: stack nicely */
@media (max-width: 900px){
  .awards-section .award-header,
  .awards-section .award-row{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .awards-section .award-header > div:last-child,
  .awards-section .award-row .award-year{
    text-align: left;
    
  }

  /* Optional: hide header on mobile if you prefer cleaner stacking */
  /* .awards-section .award-header{ display:none !important; } */
  

}




/* ============================
   AWARDS – MAIN TITLE
   ============================ */

.awards-section .title-Head h2{
  text-transform: uppercase;
}
















/* ============================
   HOME – HERO VIDEO UNDER NAVBAR
   ============================ */

.home-hero-video {
    position: relative;
    margin-top: -90px;
    z-index: auto;
}

@media (max-width: 960px) {
    .home-hero-video {
        margin-top: 0;
    }
}

.home-hero-video-el,
.home-hero-video-placeholder {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* HOME – Latest from Koperativa layout (text left, link right) */
.home-latest-row{
  display: flex;
  align-items: flex-start; 
  justify-content: space-between;
  gap: 40px;
  padding-top: 00px;
}

.home-see-work-link {
  margin-top: 80px; /* aligns with paragraph first line */
}



/* Keep the paragraph nicely sized but still within your 1150px container */
.home-latest-copy{
  max-width: 760px;
}

/* minor polish */
.home-see-work-link{
  white-space: nowrap;
  font-size: 22px;        /* was ~16px */
    font-weight: 500;
}


/* ============================
   HOME – ALIGN WITH WORK PAGE
   ============================ */
   
   

.home-intro-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.home-latest-section {
    padding-top: 0;
    padding-bottom: 110px;
}

.home-work-section {
    padding-top: 0;
    padding-bottom: 60px;
}

.home-news-section {
    padding-top: 60px;
    padding-bottom: 10px;
    
}

/* See more projects – black pill CTA */
.btn-pill-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 999px;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.btn-pill-black:hover {
    background-color: #000;
    color: #fff;
}

.home-work-cta {
    margin-top: 40px;
}

/* =========================================
   SERVICE PAGES — TYPE A/B + CTA PILL (FINAL)
   ========================================= */

/* Full width grey band for Type A block only */
.cardsA-section {
    background: #f5f5f5;
}

/* Type B section stays white (explicit) */
.cardsB-section {
    background: #fff;
}

/* ===== Type A cards — 4 per row @ 1150px, 270px cards, 10px gap ===== */
.service-cardsA-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, 270px);
    justify-content: center;
    gap: 10px; /* 8–12px requested */
}

/* white cards on grey band */
.cardsA-section .service-cardA {
    background: #fff;
}

.service-cardA {
    border-radius: 18px;
    padding: 34px 22px;
    text-align: center;
}

.service-cardA-icon {
    margin-bottom: 26px;
}

.service-cardA-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: inline-block;
}

.service-cardA-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.2;
}

.service-cardA-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0,0,0,0.75);
}

/* Services – CardsA block background */
.service-section.type-cardsA{
  background: #f5f5f5;
}


/* ===== Type B cards — same grid + sizing ===== */

/* ===== CTA pill block ===== */
.service-cta-pill-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.service-cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 48px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    border: none;
}

/* Smaller title for CTA block (your reference) */
.service-cta-title {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.4;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 1200px) {
    .service-cardsA-grid,
    .service-cardsB-grid {
        grid-template-columns: repeat(3, 270px);
    }
}

@media (max-width: 900px) {
    .service-cardsA-grid,
    .service-cardsB-grid {
        grid-template-columns: repeat(2, 270px);
    }
}

@media (max-width: 640px) {
    .service-cardsA-grid,
    .service-cardsB-grid {
        grid-template-columns: 1fr;
    }
}







body.service-page .service-cardsA-grid.cards-count-2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
}
body.service-page .service-cardsA-grid.cards-count-2 .service-cardA{
  width: auto !important;
  max-width: none !important;
}



/* =========================================
   OUR STORY
   ========================================= */
   
   
   
   /* OUR STORY: keep all image grids inside the centered content width */
body.ourstory-page .container{
  width: 88%;
  max-width: 1300px;   /* your requested content width */
  margin-left: auto;
  margin-right: auto;
}

/* shared row */
body.ourstory-page .gifs-row{
  display: grid;
  gap: 30px;           /* space between images */
  margin: 28px 0;      /* space above/below the row */
}

/* 2 images side by side */
body.ourstory-page .gifs-row.two{
  grid-template-columns: 1fr 1fr;
}

/* single wide image */
body.ourstory-page .gifs-row.single{
  grid-template-columns: 1fr;
}

/* images behave consistently */
body.ourstory-page .gifs-row img{
  width: 100%;
  height: auto;
  display: block;
}

.home-latest-section {
    padding-top: 120px;
}

/* Homepage – See more projects button */
.home-work-cta {
    display: flex;
    justify-content: center;
    margin-top: 10px; /* breathing space above */
}

.home-work-cta .btn-pill-black {
    
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1;
}

/* Homepage – See more projects button should NOT be uppercase */
.home-work-cta .btn-pill-black {
    text-transform: none;
}


/* ============================
   HOME – SEE MORE PROJECTS CTA
   ============================ */

.home-work-cta {
    display: flex;
    justify-content: center;
    padding-top: 0px;
    padding-bottom: 0px;
}

.home-see-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 20px 48px;
    border-radius: 999px;

    background: #000;
    color: #fff;

     font-family: "PPNeueMontreal", sans-serif;
    font-size: 24px;
    font-weight: 400;

    text-decoration: none;
    text-transform: none; /* IMPORTANT: no uppercase */
    letter-spacing: 0;

    transition: background-color 0.25s ease;
}

.home-see-more-btn:hover {
    background: #111;
}

/* ===== HOME/ABOUT – WHAT WE DO (plain arrow + see all services) ===== */
.what-we-do--plain .title-Head h2{
  text-transform: uppercase; /* ensure WHAT WE DO */
}

.what-we-do--plain .what-seeall{
  display: inline-block;
  margin-top: 26px;
  font-size: 24px;
  color: #000;
  text-decoration: none;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
}

.what-we-do--plain .what-right{
  display: flex;
  flex-direction: column;
}

.what-we-do--plain .service-row--plain{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid #dcdcdc;
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

.what-we-do--plain .service-row--plain:last-child{
  border-bottom: 1px solid #dcdcdc;
}

.what-we-do--plain .service-row-arrow{
  font-size: 26px;
  line-height: 1;
  opacity: 0.7;
}

/* Keep the arrow feeling light like the reference */
.what-we-do--plain .service-row--plain:hover .service-row-arrow{
  opacity: 1;
}

/* =========================
   WHAT WE DO – services list
   ========================= */
   
   /* WHAT WE DO – SVG arrow styling */
.whatwedo-services .service-row-arrow img{
  width: 24px;
  height: 24px;
  opacity: 0.55;
  display: block;
}

   

/* Layout: increase distance between left text and right list */
.what-we-do,
.whatwedo,
.about-what-we-do {
  column-gap: 120px; /* pushes services further to the right */
}

/* The right column that contains the services list */
.what-we-do .services,
.whatwedo .services,
.about-what-we-do .services,
.what-we-do .services-list,
.whatwedo .services-list,
.about-what-we-do .services-list {
  margin-left: 40px; /* extra nudge right if needed */
}

/* Add TOP + BOTTOM line around the whole list */
.what-we-do .services-list,
.whatwedo .services-list,
.about-what-we-do .services-list,
.what-we-do .services,
.whatwedo .services,
.about-what-we-do .services {
  border-top: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8;
}

/* Each row: bigger text + nicer padding + divider line */
.what-we-do .service-row,
.whatwedo .service-row,
.about-what-we-do .service-row,
.what-we-do .services-list a,
.whatwedo .services-list a,
.about-what-we-do .services-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 0;
  border-bottom: 1px solid #D8D8D8;

  font-size: 22px;      /* bigger service text */
  line-height: 1.2;
}

/* remove extra bottom border on the last row so the bottom line is clean */
.what-we-do .service-row:last-child,
.whatwedo .service-row:last-child,
.about-what-we-do .service-row:last-child,
.what-we-do .services-list a:last-child,
.whatwedo .services-list a:last-child,
.about-what-we-do .services-list a:last-child {
  border-bottom: 0;
}

/* Bigger arrows (works if arrow is an element with class service-arrow) */
.what-we-do .service-arrow,
.whatwedo .service-arrow,
.about-what-we-do .service-arrow {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* If your arrow is an <img> inside something */
.what-we-do .service-arrow img,
.whatwedo .service-arrow img,
.about-what-we-do .service-arrow img {
  width: 24px;
  height: 24px;
  display: block;
}

/* If your arrow is inside a circle button and you want it like the reference (no big circle) */
.what-we-do .service-arrow,
.whatwedo .service-arrow,
.about-what-we-do .service-arrow {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* WHAT WE DO – list wrapper creates top & bottom line once */
.whatwedo-services{
  margin-left: 60px;               /* pushes list a bit right from the text column */
  border-top: 1px solid #d6dde3;   /* single top line */
  border-bottom: 1px solid #d6dde3;/* single bottom line */
}

/* Single separators, no double borders */
.whatwedo-services .service-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;                 /* narrower rows */
  border-bottom: 1px solid #d6dde3;
  text-decoration: none;
  color: #000;
}

.whatwedo-services .service-row:last-child{
  border-bottom: none;             /* prevents double line with wrapper bottom */
}

/* Typography + arrow sizing */
.whatwedo-services .service-row-label{
 font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  font-weight: 400;
}

.whatwedo-services .service-row-arrow{
  font-size: 26px;                 /* lightly larger arrow */
  line-height: 1;
}

/* =================================
   ABOUT / HOME IMAGE GALLERY HEIGHT
   Desktop: 1920×1080
   ================================= */

@media (min-width: 1200px) {
  .about-gallery,
  .about-gallery-section,
  .gallery-wrap {
    min-height: 830px;
    height: 830px;
  }
}

/* Force Book for body copy */
.bodymain,
.bodymain p {
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 200;
}

/* ============================
   HOME – TESTIMONIALS
   ============================ */

.home-testimonials{
  padding: 120px 0;
  background: #fff;
}

.home-testimonials-block{
  max-width: 1150px;
  margin: 0 auto;
}

.home-testimonials-title{
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

.home-testimonials-intro{
  max-width: 780px;
  margin: 0 0 42px 0;
  font-size: 18px;
  line-height: 1.6;
  opacity: .9;
}

/* Layout like service pages: photo left, quote right */
.home-testimonials-items{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.home-testimonial{
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 56px;
  align-items: start;
}

.home-testimonial-photo{
  width: 280px;
  height: 280px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.home-testimonial-quote{
  margin: 0;
  font-size: 20px;
  line-height: 1.7;
  font-weight: 500;
  max-width: 980px;
}

.home-testimonial-meta{
  margin-top: 36px;
}

.home-testimonial-name{
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.home-testimonial-role{
  font-size: 14px;
  line-height: 1.6;
  opacity: .85;
  margin: 0;
}

/* Divider line (like service pages) */
.home-testimonial::after{
  content:"";
  grid-column: 2 / -1;
  height: 1px;
  background: #111;
  opacity: .35;
  margin-top: 34px;
}

/* Mobile */
@media (max-width: 900px){
  .home-testimonial{
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
  .home-testimonial-photo{
    width: 160px;
    height: 160px;
  }
  .home-testimonial::after{
    grid-column: 1 / -1;
  }
}
/* =========================
   HOME – TESTIMONIALS (carousel like Services)
   ========================= */

.home-testimonials{
  padding: 120px 0;
  background:#fff;
}

.home-testimonials-title{
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  margin: 0 0 32px 0;
  letter-spacing: .02em;
}

.home-testimonials-intro{
  max-width: 900px;
  margin: 0 0 36px 0;
  font-size: 18px;
  line-height: 1.6;
  opacity: .85;
}

/* =========================
   TESTIMONIAL CAROUSEL (shared)
   ========================= */
.tcar{position:relative;}
.tcar-viewport{overflow:hidden;}
.tcar-track{
  display:flex;
  transition: transform .35s ease;
  will-change: transform;
  touch-action: pan-y;
}
.tcar-slide{
  min-width:100%;
  padding: 0;
  box-sizing:border-box;
}

.t-quote{
  font-size:22px;
  line-height:1.6;
  max-width: 980px;
  margin:0;
}

.t-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:60px;
  gap:24px;
}

.t-person{
  display:flex;
  align-items:center;
  gap:18px;
  min-width: 320px;
}
.t-photo{
  width:72px;height:72px;border-radius:999px;object-fit:cover;flex:0 0 72px;
}
.t-name{font-weight:600;font-size:20px;margin:0 0 4px 0;}
.t-meta{font-size:15px;line-height:1.6;opacity:.9;margin:0;}

.t-arrows{display:none; gap:18px; align-items:center;}
.tcar.has-multi .t-arrows{display:flex;}

.t-btn{
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(0,0,0,.22);
  background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.t-btn svg{width:18px;height:18px;}

.t-line{
  margin-top:34px;
  height:1px;background:#111;opacity:.7;
}

/* arrows bottom-right like your screenshot */
.t-arrows-global{
  position:absolute;
  right:0;
  bottom:0;
  z-index:5;
  pointer-events:auto;
}

@media (max-width:820px){
  .t-bottom{flex-direction:column; align-items:flex-start;}
  .t-arrows{align-self:flex-end;}
  .t-arrows-global{position:static; margin-top:18px;}
}




/* ============================
   HOME – WHAT WE DO column balance
   ============================ */

.home-page .what-we-do .two-col{
  grid-template-columns: 1.1fr 1fr;   /* LEFT wider, RIGHT narrower */
  column-gap: 60px;                   /* tighter gap */
}

/* ============================
   HOME – WHAT WE DO: make services list narrower (correct selector)
   ============================ */

/* Force Book everywhere (global) */
body{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
}

/* Homepage layout: left wider, right narrower */
body.home-page .what-wrapper{
  grid-template-columns: 1.1fr 1fr; /* LEFT wider, RIGHT narrower */
  gap: 60px;
}

/* Remove the extra push that widens the right column feel */
body.home-page .what-we-do .services,
body.home-page .what-we-do .services-list,
body.home-page .whatwedo-services{
  margin-left: 0;
  max-width: 720px; /* keeps list visually narrow */
}

/* Keep service labels in Book (not Medium) */
body.home-page .whatwedo-services .service-row-label{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
}



/* Addition for the ABout TOP */


/* ============================
   ABOUT – TOP SECTION (matches /about/index.php)
   ============================ */

/* Reduce distance from navbar to title */
.about-section{
  padding-top: 80px;      /* was 140px in your CSS */
  padding-bottom: 90px;   /* keep nice breathing room */
  background: #fff;
}

/* Title spacing (About Koperativa) */
.about-section .title-Head h2{
  margin: 0 0 42px 0;
}

/* Intro paragraph spacing */
.about-section .bodymain p{
  max-width: 700px;
  margin: 0 auto 36px auto;
  line-height: 1.7;
    padding-left: 40px;
  padding-right: 40px;
}

/* CTA wrapper spacing */
.about-section .see-services-wrap{
  margin-top: 40px;
  text-align: center;
}

/* CTA should be a text link with underline (NOT a pill) */
.about-section .see-work-btn{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;

  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 24px;
  font-weight: 400;

  text-transform: none;
  letter-spacing: 0;

  color: #000;
  text-decoration: none;

  display: inline-block;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
}

/* Kill any pill hover behavior */
.about-section .see-work-btn:hover{
  background: transparent;
}


/* ============================
   ABOUT – WHAT WE DO = identical to HOME
   (ONLY affects the About include wrapper: .about-what-we-do)
   ============================ */

/* Match the same column balance as homepage */
.about-what-we-do .what-wrapper,
.about-what-we-do .two-col{
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
}

/* Remove the extra left push used elsewhere */
.about-what-we-do .services,
.about-what-we-do .services-list,
.about-what-we-do .whatwedo-services{
  margin-left: 0;
  max-width: 720px;
}

/* Make sure the list uses the same “plain” row style as homepage */
.about-what-we-do .what-right{
  display: flex;
  flex-direction: column;
}

/* Row styling identical to HOME */
.about-what-we-do .service-row--plain{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid #dcdcdc;
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
}
.about-what-we-do .service-row--plain:last-child{
  border-bottom: 1px solid #dcdcdc;
}

/* Arrow identical to HOME */
.about-what-we-do .service-row-arrow img{
  width: 24px;
  height: 24px;
  opacity: 0.55;
  display: block;
}
.about-what-we-do .service-row--plain:hover .service-row-arrow img{
  opacity: 1;
}

/* CTA identical to HOME */
.about-what-we-do .what-seeall{
  display: inline-block;
  margin-top: 26px;
  font-size: 24px;
  color: #000;
  text-decoration: none;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
}

/* Transition Entrance Reveal Content */



/* Home blocks – use same reveal motion as cards */
.home-latest-section,
.home-news-section,
.what-we-do,
.about-gallery,
.hero {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.home-latest-section.reveal-visible,
.home-news-section.reveal-visible,
.what-we-do.reveal-visible,
.about-gallery.reveal-visible,
.hero.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}



/* ABOUT – reveal-on-scroll hooks */
.about-section,
.photo-slider,
.what-we-do,
.clients-title,
.hero,
.team-section,
.awards-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.about-section.reveal-visible,
.photo-slider.reveal-visible,
.what-we-do.reveal-visible,
.clients-title.reveal-visible,
.hero.reveal-visible,
.team-section.reveal-visible,
.awards-section.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* OUR STORY – reveal-on-scroll hooks */
body.ourstory-page .os-block,
body.ourstory-page .os-img-single,
body.ourstory-page .os-img-two {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.ourstory-page .os-block.reveal-visible,
body.ourstory-page .os-img-single.reveal-visible,
body.ourstory-page .os-img-two.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Services – text block (match homepage intro, centered) */
.service-section.type-text .service-section-body,
.service-section.type-text p{
  font-family: "PPNeueMontreal", sans-serif;
  font-size: 28px;
  line-height: 1.7;
  color: #000;

  max-width: 880px;
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

body.home-page .home-work-section .project-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}


body.home-page .home-news-section .project-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
}


/* Homepage – See more projects button */
.home-page .home-see-more-btn{
    display: inline-block;
    background: #121212;
    color: #ffffff;

    padding: 18px 36px;              /* py-[18px] px-[36px] */
    font-size: 24px;                 /* text-[24px] */
    line-height: 28px;               /* leading-[28px] */

    border-radius: 61px;             /* rounded-[61px] */
    text-decoration: none;
    font-family: "PPNeueMontreal", sans-serif;
    font-weight: 400;

    margin-top: 10px;                /* mt-[20px] */
margin-bottom:10px;   
    transition: background 0.25s ease, transform 0.25s ease;
}

.service-section-title
{
  font-family: "Whyte", sans-serif;
  font-weight: 400;
  color: #000;

  font-size: 40px;
  line-height: 55px;
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .cardsA-section .title-Head h2 {
    font-size: 55px;
    line-height: 55px;
  }
}

@media (min-width: 1024px) {
  .cardsA-section .title-Head h2 {
    font-size: 65px;
    line-height: 65px;
  }
}





/* ============================
   HOME – TESTIMONIALS v2 (matches new screenshot)
   ============================ */

.home-testimonials-v2{
  background: #efefef;
  padding: 110px 0;
}

.home-testimonials-v2 .container{
  max-width: 1150px;
}

/* header row */
.ht2-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom: 55px;
}

.ht2-title{
  font-family: "Whyte", sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* arrows top-right */
.ht2-arrows{
  display:flex;
  gap:32px;                 /* tighter spacing like screenshot */
  align-items:center;
  background: transparent !important;  /* ensure no grey strip */
  padding: 0;
  margin: 0;
}

/* the button (55x55, dark grey) */
.ht2-btn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  background: #313131;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  /* kill any “disabled / washed” look */
  opacity: 1;
  filter: none;
  box-shadow: none;
}

/* keep same look even if disabled is used */
.ht2-btn:disabled{
  opacity: 1;
  cursor: pointer;
}

/* make arrow icons white */
.ht2-btn img{
  width: 20px;
  height: 20px;
  display:block;

  /* if your arrows are SVGs exported as <img>, this helps some browsers */
  filter: brightness(0) invert(1);
}

/* if you ever switch to inline SVG instead of img */
.ht2-btn svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
}

/* optional hover */
.ht2-btn:hover{
  background: #000;
}

/* carousel */
.ht2{ position:relative; }
.ht2-viewport{ overflow:hidden; }
.ht2-track{
  display:flex;
  will-change: transform;
  transition: transform .35s ease;

  margin-left: -16px;
  margin-right: -16px;
}

/* 2-up desktop, 1-up mobile */
.ht2-slide{
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 0 10px;
}

@media (max-width: 900px){
  .ht2-slide{ flex-basis: 100%; padding-right: 0; }
}

/* card */
.ht2-card{
  background:#fff;
  border-radius: 18px;
  padding: 30px 30px;
  min-height: 400px;
  display:flex;
  flex-direction:column;
}

.ht2-quote p{
  margin: 0;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color:#000;
  max-width: 520px;
}

/* bottom meta bar */
.ht2-meta{
  margin-top: auto;
  padding-top: 34px;
}

.ht2-person{
  display:flex;
  align-items:center;
  gap:18px;
}

.ht2-photo{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 74px;
  background: #e6e6e6;
}

.ht2-photo--empty{
  display:block;
}

.ht2-name{
  font-family: "PPNeueMontreal", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 4px;
}

.ht2-role,
.ht2-company{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  opacity: .85;
}

/* HOME – Latest from Koperativa (mobile layout fix) */
@media (max-width: 768px) {
  .home-latest-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .home-latest-copy {
    max-width: 100%;
  }

  .home-see-work-link {
    margin-left: 0;
    align-self: flex-start; /* change to center if you want */
  }
}

/* WHAT WE DO – mobile layout fix */
@media (max-width: 768px) {

  /* remove the extra horizontal offset on mobile */
  .whatwedo-services{
    margin-left: 0 !important;
  }

  /* stack the two columns cleanly */
  .what-wrapper{
    gap: 36px;
  }

  /* make rows feel like the reference (not chunky) */
  .what-we-do--plain .service-row--plain{
    padding: 16px 0;
    font-size: 18px;
  }

  /* remove big arrow circle look and keep arrow small */
  .what-we-do--plain .service-row-arrow{
    width: 22px;
    height: 22px;
    opacity: 0.7;
  }

  /* if the arrow is an SVG/img inside */
  .what-we-do--plain .service-row-arrow img{
    width: 22px;
    height: 22px;
    display: block;
  }

  /* shorten underline so it fits nicely on mobile */
  .what-we-do--plain .what-seeall{
    border-bottom-width: 2px;
    padding-bottom: 2px;
  }
}

/* WHAT WE DO (mobile) – fix old markup: .service-row + .circle-btn */
@media (max-width: 768px){

  /* stack columns */
  .what-wrapper{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* full-width list (no weird offsets) */
  .what-right{
    gap: 0 !important;
    margin-left: 0 !important;
  }

  /* top line (because your old CSS uses border-top per row) */
  .what-right .service-row:first-child{
    border-top: 1px solid #d6dde3 !important;
  }

  /* tighter rows */
  .what-right .service-row{
    padding: 16px 0 !important;
    border-top: 0 !important;                 /* prevent double line */
    border-bottom: 1px solid #d6dde3 !important;
    font-size: 20px !important;
  }

  /* kill the big circle button */
  .what-right .circle-btn{
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
  }

  /* hide the old arrow character inside circle */
  .what-right .circle-btn span{
    display: none !important;
  }

  /* replace with your arrow.svg */
  .what-right .circle-btn::after{
    content:"";
    width: 22px;
    height: 22px;
    display: block;
    background: url("/assets/img/arrow.svg") no-repeat center / contain;
    opacity: .55;
  }

  .what-right .service-row:hover .circle-btn::after{
    opacity: 1;
  }
}


/* WHAT WE DO (plain include) – mobile theme */
@media (max-width: 768px){

  /* stack left+right columns */
  .what-we-do--plain .what-wrapper{
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* make copy full width */
  .what-we-do--plain .bodymain p{
    max-width: 100% !important;
  }

  /* remove any desktop width caps / offsets on the list */
  .what-we-do--plain .whatwedo-services{
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* CTA link: keep it readable on mobile */
  .what-we-do--plain .what-seeall{
    font-size: 20px !important;
    margin-top: 22px !important;
  }

  /* rows: slightly tighter and clean separators */
  .what-we-do--plain .service-row--plain{
    padding: 16px 0 !important;               /* narrower rows */
    border-bottom: 1px solid #d6dde3 !important;
  }

  /* remove any stray border-top logic that might create doubles */
  .what-we-do--plain .service-row--plain{
    border-top: 0 !important;
  }

  /* keep ONE top + bottom line from wrapper only */
  .what-we-do--plain .whatwedo-services{
    border-top: 1px solid #d6dde3 !important;
    border-bottom: 1px solid #d6dde3 !important;
  }
  .what-we-do--plain .service-row--plain:last-child{
    border-bottom: 0 !important;              /* prevents double line at bottom */
  }

  /* service label slightly larger, like your reference */
  .what-we-do--plain .service-row-label{
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  /* arrow svg: smaller and lighter */
  .what-we-do--plain .service-row-arrow img{
    width: 20px !important;
    height: 20px !important;
    opacity: 0.55 !important;
  }
}


/* FORCE What We Do to stack on mobile */
@media (max-width: 900px) {
  body.home-page .what-wrapper,
  body.ourstory-page .what-wrapper,
  body.about-page .what-wrapper,
  .what-we-do .what-wrapper {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* remove the right-column offset on mobile */
  .whatwedo-services {
    margin-left: 0 !important;
  }

  /* make service list full width */
  .what-right {
    width: 100%;
  }
}


/* HOME Testimonials – mobile overflow fixes */
@media (max-width: 768px) {

  /* prevent the section from pushing outside viewport */
  .home-testimonials-v2,
  .home-testimonials-v2 * {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* make the big title wrap and not overflow */
  .home-testimonials-v2 .ht2-title {
    font-size: 40px;        /* adjust if needed */
    line-height: 1.05;
    white-space: normal;    /* IMPORTANT */
    overflow-wrap: anywhere;
  }

  /* make the slider track/cards respect screen width */
  .home-testimonials-v2 .ht2-track,
  .home-testimonials-v2 .ht2-viewport {
    overflow: hidden;
    width: 100%;
  }

  .home-testimonials-v2 .ht2-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* keep arrows inside the container */
  .home-testimonials-v2 .ht2-arrows {
    right: 0;
  }
}








/* ============================
   ABOUT PAGE — TOP HERO SPACING (FINAL)
   ============================ */

body.about-page .about-section{
  padding-top: 103px;     /* reduces the "floating center" feel */
  padding-bottom: 103px;  /* reduces the huge white gap before gallery */
}

body.about-page .about-section .title-Head h2{
  margin: 0 0 46px 0;
}

body.about-page .about-section .bodymain p{
  max-width: 200px;
  margin: 0 auto 28px auto;   /* less gap before CTA */
  line-height: 1.5;
  text-align: center;
}

/* IMPORTANT: your current margin-top: 40; is invalid */
body.about-page .about-section .see-services-wrap{
  margin-top: 48px;  /* space above CTA */
  text-align: center;
}

/* CTA as text link */
body.about-page .about-section .see-work-btn{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: "PPNeueMontreal-Medium", sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  text-decoration: none;
  display: inline-block;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
}

/* Mobile */
@media (max-width: 768px){
  body.about-page .about-section{
    padding-top: 38px;
    padding-bottom: 44px;
  }

  body.about-page .about-section .title-Head h2{
    margin-bottom: 18px;
  }
}


/* ABOUT PAGE – tighten title tracking */
body.about-page .about-section .title-Head h2{
  letter-spacing: -0.02em;   /* tighter, elegant */
}






/* WHAT WE DO (plain) — circle hover inversion */
.what-we-do--plain .service-row-arrow{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.35);
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  transition: 
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.what-we-do--plain .service-row-arrow img{
  width: 18px;
  height: 18px;
  display: block;

  /* arrow starts dark */
  filter: none;

  transition: filter 0.25s ease;
}

/* HOVER STATE */
.what-we-do--plain .service-row--plain:hover .service-row-arrow{
  background-color: #000;
  border-color: #000;
}

.what-we-do--plain .service-row--plain:hover .service-row-arrow img{
  filter: brightness(0) invert(1); /* turns arrow white */
}




/* ============================
   WHAT WE DO — FINAL OVERRIDES
   (rows thinner + circles bigger)
   ============================ */

/* Desktop */
.what-we-do--plain .service-row--plain{
  padding: 8px 0 !important; /* thinner rows */
}

/* Bigger circle */
.what-we-do--plain .service-row-arrow{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.what-we-do--plain .service-row-arrow img{
  width: 20px !important;
  height: 20px !important;
}

/* Mobile */
@media (max-width: 768px){
  .what-we-do--plain .service-row--plain{
    padding: 10px 0 !important;
  }

  .what-we-do--plain .service-row-arrow{
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .what-we-do--plain .service-row-arrow img{
    width: 18px !important;
    height: 18px !important;
  }
}

/* TEAM TITLE — force tighter tracking */
.team-section .title-Head h2{
  letter-spacing: 0.015em !important; /* try 0.02 / 0.01 / 0 */
}


/* =========================================================
   NEWS & BLOG — OVERRIDE FIX (paste at END of styles.css)
   This neutralizes old unscoped rules and applies the
   newer “spacing guide” header + clean cards/grid.
   ========================================================= */

/* Kill any old generic styling bleed (safe reset on News page only) */
body.news-page .blog-card,
body.news-blog-page .blog-card{
  color:#000 !important;
}

/* ========== HERO (newer header spacing) ========== */
body.news-page .news-blog-hero,
body.news-blog-page .news-blog-hero{
  padding-top:110px !important;
  padding-bottom:110px !important;
  text-align:center !important;
}

/* Kicker (if you use it) */
body.news-page .news-blog-hero .news-blog-kicker,
body.news-blog-page .news-blog-hero .news-blog-kicker{
  font-family:"PPNeueMontrealBook", sans-serif !important;
  font-weight:400 !important;
  font-size:24px !important;
  line-height:32px !important;
  margin:0 0 60px 0 !important;
  color:rgba(0,0,0,.55) !important;
}

/* Main title */
body.news-page .news-blog-hero .title-Blogs,
body.news-blog-page .news-blog-hero .title-Blogs{
  font-family:"PPNeueMontreal", sans-serif !important;
  font-weight:500 !important;
  font-size:72px !important;
  line-height:80px !important;
  margin:0 !important;
  letter-spacing:0 !important;
}

/* If you still have .blog-text under the title */
body.news-page .news-blog-hero .blog-text,
body.news-blog-page .news-blog-hero .blog-text{
  font-family:"PPNeueMontrealBook", sans-serif !important;
  font-size:20px !important;
  line-height:1.7 !important;
  margin:28px auto 0 auto !important;
  max-width:900px !important;
  color:#707070 !important;
}

/* Responsive hero */
@media (max-width:1024px){
  body.news-page .news-blog-hero .title-Blogs,
  body.news-blog-page .news-blog-hero .title-Blogs{
    font-size:56px !important;
    line-height:64px !important;
  }
}
@media (max-width:640px){
  body.news-page .news-blog-hero,
  body.news-blog-page .news-blog-hero{
    padding-top:80px !important;
    padding-bottom:90px !important;
  }
  body.news-page .news-blog-hero .news-blog-kicker,
  body.news-blog-page .news-blog-hero .news-blog-kicker{
    margin-bottom:36px !important;
    font-size:18px !important;
    line-height:26px !important;
  }
  body.news-page .news-blog-hero .title-Blogs,
  body.news-blog-page .news-blog-hero .title-Blogs{
    font-size:40px !important;
    line-height:46px !important;
  }
}

/* ========== LIST BACKGROUND BAND ========== */
body.news-page .news-blog-bg,
body.news-blog-page .news-blog-bg{
  background:#efefef !important;
  padding-top:60px !important;
  padding-bottom:120px !important;
}

/* ========== GRID / CARDS (scoped so it won’t touch About) ========== */
body.news-page .latest-blogs,
body.news-blog-page .latest-blogs{
  padding:0 0 40px !important;
}

body.news-page .blog-grid,
body.news-blog-page .blog-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:16px !important;
  padding-bottom:40px !important;
}

body.news-page .blog-card,
body.news-blog-page .blog-card{
  text-decoration:none !important;
  color:#000 !important;
  display:block !important;

  /* if you use reveal animation */
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
body.news-page .blog-card.reveal-visible,
body.news-blog-page .blog-card.reveal-visible{
  opacity:1;
  transform:translateY(0);
}

/* Image */
body.news-page .blog-img,
body.news-blog-page .blog-img{
  width:100% !important;
  height:340px !important;
  overflow:hidden !important;
}
body.news-page .blog-img img,
body.news-blog-page .blog-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Title + date */
body.news-page .blog-title,
body.news-blog-page .blog-title{
  font-family:"PPNeueMontrealBook", sans-serif !important;
  font-size:22px !important;
  font-weight:400 !important;
  margin:15px 0 5px !important;
  color:#000 !important;
}
body.news-page .blog-date,
body.news-blog-page .blog-date{
  font-family:"PPNeueMontrealBook", sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  opacity:.6 !important;
  margin:0 0 30px !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  color:#000 !important;
}

/* Responsive list */
@media (max-width:900px){
  body.news-page .blog-grid,
  body.news-blog-page .blog-grid{
    grid-template-columns:1fr !important;
  }
  body.news-page .blog-img,
  body.news-blog-page .blog-img{
    height:260px !important;
  }
}

/* Load more */
body.news-page .blogs-loadmore,
body.news-blog-page .blogs-loadmore{
  text-align:center !important;
  margin-top:60px !important;
}
body.news-page .blogs-loadmore__button,
body.news-blog-page .blogs-loadmore__button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px 46px !important;
  border-radius:999px !important;
  background:#000 !important;
  color:#fff !important;
  font-size:22px !important;
  border:0 !important;
  cursor:pointer !important;
}


@media (max-width: 768px){
  body{
    padding-top:0;
  }
}

/* ============================
   OUR STORY — HERO (FINAL)
   ============================ */

body.ourstory-page .ourstory-hero{
  padding-top: 105px;      /* distance from navbar */
  padding-bottom: 20px;    /* space before grey section */
  background: #fff;
  text-align: center;
}

/* Title */
body.ourstory-page .ourstory-hero .title-Head h2{
  margin: 0 0 40px 0;
  font-family: "Whyte", sans-serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Hero paragraph */
body.ourstory-page .ourstory-hero .bodymain p{
  max-width: 720px;        /* controls line length */
  
  padding: 0 18px;         /* safe mobile padding */
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  line-height: 1.55;
  text-align: center;
  box-sizing: border-box;
    margin-bottom: 10px; /* try 22–30px */

}

/* CTA */
body.ourstory-page .ourstory-hero .see-work-btn{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;

  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 24px;
  font-weight: 400;

  text-transform: none;
  letter-spacing: 0;

  color: #000;
  text-decoration: none;
  display: inline-block;

  border-bottom: 2px solid #000;
  padding-bottom: 3px;
}

/* Mobile */
@media (max-width: 768px){
  body.ourstory-page .ourstory-hero{
    padding-top: 72px;
    padding-bottom: 28px;
  }

  body.ourstory-page .ourstory-hero .title-Head h2{
    font-size: 40px;
    margin-bottom: 24px;
  }

  body.ourstory-page .ourstory-hero .bodymain p{
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
  }
}
/* =========================================
   OUR STORY — HERO CENTER FIX (OVERRIDE)
   Paste at END of styles.css
   ========================================= */

body.ourstory-page .ourstory-hero{
  text-align:center;
}

/* force the paragraph container to center its child */
body.ourstory-page .ourstory-hero .bodymain{
  display:flex;
  justify-content:center;
}

/* hard override against global .bodymain p rules */
body.ourstory-page .ourstory-hero .bodymain > p{
  width:100%;
  max-width:720px;
  margin: 0 auto 50px auto !important; /* this is the key */
  padding: 0 24px;
  text-align:center;
  box-sizing:border-box;
}

.team-section .title-Head h2{
  margin-bottom:30px;
}


/* =====
.news-blog-hero .title-Blogs, 
.news-blog-hero .blog-text{
  max-width: 1100px;
  margin-left: 120px;
  margin-right: 120px;
}
===== */

/* =========================
   WORK – MOBILE TOP LAYOUT
   ========================= */
@media (max-width: 900px){

  /* Give the page a clean top spacing under fixed header */
  body.work-page,
  .work-page{
    padding-top: 92px; /* adjust if your header height differs */
  }

  /* Intro paragraph block (centered, narrow) */
  .work-intro,
  .work-hero-intro,
  .work-page .intro,
  .work-page .work-intro-text{
    max-width: 720px;
    margin: 0 auto;
    padding: 0 22px;
    font-size: 16px;
    line-height: 1.7;
    color: #101828;
    text-align: center;
  }

  /* Divider line under intro */
  .work-divider,
  .work-hero-divider,
  .work-page hr{
    border: 0;
    height: 1px;
    background: #d0d5dd;
    max-width: 520px;
    margin: 28px auto 34px;
  }

  /* WORK title spacing */
  .work-title,
  .work-page h1,
  .work-page .page-title{
    max-width: 520px;
    margin: 0 auto 12px;
    padding: 0 22px;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #101828;
  }

  /* Filters: wrap nicely, airy */
  .work-filters,
  .work-page .filters,
  .work-page .work-cats,
  .work-page .work-filter{
    max-width: 520px;
    margin: 0 auto 18px;
    padding: 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
  }

  .work-filters a,
  .work-page .filters a,
  .work-page .work-cats a,
  .work-page .work-filter a{
    font-size: 14px;
    line-height: 1;
    color: #101828;
    text-decoration: none;
    white-space: nowrap;
    opacity: .85;
  }

  .work-filters a.is-active,
  .work-page .filters a.is-active,
  .work-page .work-cats a.is-active,
  .work-page .work-filter a.is-active{
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
  }
}


/* =========================================================
   HOME – TESTIMONIALS v2 (MOBILE FIX)
   Arrows below title (left aligned) + wider card
   ========================================================= */

@media (max-width: 768px){

  /* 1) Title row becomes a stacked column */
  .home-testimonials-v2 .ht2-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;          /* space between title and arrows */
    margin-bottom: 24px !important; /* tighter than desktop */
  }

  /* 2) Arrows sit below title, left aligned */
  .home-testimonials-v2 .ht2-arrows{
    justify-content: flex-start !important;
    gap: 14px !important;
    width: auto !important;
  }

  /* 3) Make the carousel/card feel wider on mobile */
  .home-testimonials-v2 .ht2-track{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-testimonials-v2 .ht2-slide{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card closer to screen edges (still keeps your container padding) */
  .home-testimonials-v2 .ht2-card{
    width: 100% !important;
    max-width: none !important;
  }

  /* OPTIONAL: allow quote line-length to expand on mobile */
  .home-testimonials-v2 .ht2-quote p{
    max-width: none !important;
  }
}

/* =========================================================
   MOBILE TYPOGRAPHY — OUR CLIENTS + LATEST FROM KOPERATIVA
   Smaller title + smaller paragraph (like your reference)
   ========================================================= */
@media (max-width: 768px){

  /* ---------- OUR CLIENTS (About + Home include) ---------- */
  .clients-title h2{
    font-size: 36px !important;     /* was 64 */
    line-height: 1.05 !important;
    margin-bottom: 18px !important; /* tighten */
    letter-spacing: -0.02em !important;
  }

  .clients-title .bodymain p{
    font-size: 16px !important;     /* was 22 */
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* ---------- LATEST FROM KOPERATIVA (Home) ---------- */
  body.home-page .home-latest-section .title-Head h2{
    font-size: 36px !important;     /* match clients title */
    line-height: 1.05 !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.01em !important;
  }

  body.home-page .home-latest-section .bodymain p{
    font-size: 16px !important;     /* match clients paragraph */
    line-height: 1.6 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   MOBILE TYPOGRAPHY — OUR CLIENTS + LATEST FROM KOPERATIVA
   Smaller title + smaller paragraph (like your reference)
   ========================================================= */
@media (max-width: 768px){

  /* ---------- OUR CLIENTS (About + Home include) ---------- */
  .clients-title h2{
    font-size: 36px !important;     /* was 64 */
    line-height: 1.05 !important;
    margin-bottom: 18px !important; /* tighten */
    letter-spacing: 0.01em !important;
  }

  .clients-title .bodymain p{
    font-size: 18px !important;     /* was 22 */
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* ---------- LATEST FROM KOPERATIVA (Home) ---------- */
  body.home-page .home-latest-section .title-Head h2{
    font-size: 36px !important;     /* match clients title */
    line-height: 1.05 !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.01em !important;
  }

  body.home-page .home-latest-section .bodymain p{
    font-size: 18px !important;     /* match clients paragraph */
    line-height: 1.6 !important;
    max-width: 100% !important;
  }
}

/* ============================
   MOBILE — GLOBAL BODY TEXT SIZE
   ============================ */
@media (max-width: 768px){

  /* Default paragraph text everywhere */
  body p,
  .bodymain p,
  .editorial-body p,
  .home-latest-copy p,
  .home-testimonials-v2 p,
  .ht2-quote p,
  .t-quote,
  .news-blog-hero .blog-text,
  .service-section-body p{
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* ============================
     HERO TEXT UNDER VIDEO (HOME)
     ============================ */
  .home-hero-video + .home-intro-section p,
  .home-hero-video + section p,
  .home-intro-section p{
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

}
/* =========================================================
   HOME – LATEST PROJECTS (MOBILE ONLY)
   ========================================================= */
@media (max-width: 768px){

  /* Thumbnail size */
  body.home-page .home-work-section .projects-grid .project-card .project-img{
    height: 256px !important;   /* adjust if needed */
    overflow: hidden !important;
  }

  body.home-page .home-work-section .projects-grid .project-card .project-img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Project title */
  body.home-page .home-work-section .projects-grid .project-card .project-title{
    font-family: "PPNeueMontreal", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 14px 0 6px 0 !important;
  }

  /* Project subtitle (client / category) */
  body.home-page .home-work-section .projects-grid .project-card .project-subtitle{
    font-family: "PPNeueMontrealBook", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    opacity: 0.55 !important;
    margin: 0 0 25px 0 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

}



/* =========================================
   HOME – TESTIMONIALS TITLE (MOBILE ONLY)
   ========================================= */
@media (max-width: 768px){

  body.home-page .home-testimonials-v2 .ht2-title,
  body.home-page .home-testimonials .home-testimonials-title{
    font-size: 36px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.01em !important;
  }

}



/* =========================================================
   HOME – NEWS & BLOG cards (MOBILE ONLY) — FINAL OVERRIDE
   Matches the News & Blog list styling on mobile
   ========================================================= */
@media (max-width: 768px){

  /* Ensure grid becomes 1 column on mobile (if it isn't already) */
  body.home-page .home-news-section .projects-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Thumbnail size */
  body.home-page .home-news-section .projects-grid .project-card .project-img{
    height: 256px !important;
    overflow: hidden !important;
  }

  body.home-page .home-news-section .projects-grid .project-card .project-img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Title */
  body.home-page .home-news-section .projects-grid .project-card .project-title{
    font-family: "PPNeueMontreal", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 14px 0 6px 0 !important;

    /* optional: keep 2-line clamp like reference */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* Date (subtitle) */
  body.home-page .home-news-section .projects-grid .project-card .project-subtitle{
    font-family: "PPNeueMontrealBook", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    opacity: 0.55 !important;
    margin: 0 0 25px 0 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
}


/* ============================
   // CAREER PAGE — MOBILE TUNING //
   ============================ */

@media (max-width: 640px) {

    /* Bring content lower from fixed navbar + make layout feel balanced */
    .career-page{
        min-height: auto;
        padding: 140px 0 80px; /* top is the key part */
        align-items: flex-start;
    }

    .career-empty__content{
        max-width: 520px;
        padding: 0 6px; /* subtle breathing room inside container */
    }

    .career-empty__title{
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .career-empty__text{
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .career-empty__button{
        width: 100%;
        max-width: 320px;  /* keeps it elegant, not full-bleed huge */
        padding: 16px 28px;
        font-size: 18px;
        border-radius: 999px;
    }
}


@media (max-width: 900px){
  .career-empty__button{
    max-width: 280px !important;  /* tweak */
  }
}


/* CAREER page: force scroll in case navbar left body locked */
body.career-page-body,
body.career-page-body html {
  overflow: auto !important;
}

/* safer: just force body */
body.career-page-body{
  overflow: auto !important;
  position: static !important;
}

/* CAREER: force page to be scrollable even if navbar/menu left scroll locked */
html, body { height: auto; }

body.career-page-body{
  overflow-y: auto !important;
  position: static !important;
}

body.career-page-body .career-page{
  min-height: auto !important;
  display: block !important;
}


/* ============================
   HOME – BACKGROUNDS (FINAL)
   ============================ */

/* Hero paragraph section = WHITE */
body.home-page .home-intro-section{
  background:#fff;
  padding:105px 0; /* matches what you had inline */
}

/* Latest from Koperativa = GREY */
body.home-page .home-latest-section{
  background:#efefef;
}

/* What We Do on homepage = GREY (without affecting About page) */
body.home-page .home-what-we-do{
  background:#efefef;
}






.news-blog-hero{
    padding-bottom: 40px;
}

.news-blog-bg{
    padding-top: 0;
}


/* NORMALIZE GREY ACROSS SITE */
html, body {
  background: #ffffff;
}

.bg-grey,
.home-latest-section,
.home-news-section,
.news-blog-bg,
.home-what-we-do {
  background-color: #efefef;
}


/* HOME — Latest projects pulled from Work page */
body.home-page .home-work-section {
  background-color: #efefef;
}

/* HOME — Fullscreen hero video */
body.home-page .home-hero-video {
  height: 100vh;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

body.home-page .home-hero-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* THIS is key */
  

}


/* HOME — fullscreen hero without white strip */
body.home-page{
  padding-top: 0 !important;
}

body.home-page .home-hero-video{
  margin-top: 0 !important; /* cancels the old -90px hack */
  height: 100vh;
  overflow: hidden;
}

body.home-page .home-hero-video-el{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* HOME — hero/intro paragraph: add 5px breathing room */
body.home-page .home-intro-section .bodymain p{
  padding-top: 5px;
  padding-bottom: 5px;
  box-sizing: border-box;
}

/* HOME — raise "LATEST FROM KOPERATIVA" title by 18px */
body.home-page .home-latest-section .title-Head h2{
  margin-top: -18px;
}


/* HOME — slightly increase "LATEST FROM KOPERATIVA" title */
body.home-page .home-latest-section .title-Head h2{
  font-size: calc(64px + 2px);
}

body.home-page .home-latest-section .title-Head h2{
  margin-bottom: 34px;
}

/* HOME — make project thumbnails 2px taller */
body.home-page .home-work-section .project-img{
  height: 252px; /* was 250px */
}

/* HOME — push thumbnails down by 1px via text block */
body.home-page .home-latest-section .bodymain{
  margin-bottom: 1px;
}

.project-title{
  margin-top: 22px;
}

/* PROJECT CARDS — increase row-to-row spacing by 4px */
.project-subtitle{
  margin-bottom: 28px !important;
}

/* HOME — move "See more projects" up by 25px */
body.home-page .home-see-more-btn{
  margin-top: -65px !important; /* 10px - 25px */
  margin-bottom: 200;: -65px !important; 
}


/* HOME — divider line under "See more projects" */
.home-work-divider{
  width: 100%;
  max-width: 1150px;
  height: 1px;
  background: #000;
  margin: 100px auto 0; /* 110px below the CTA */
}



/* OUR CLIENTS — control the gap between intro section and video section */
.clients-title{
  padding-bottom: 0 !important;   /* remove bottom padding contribution */
  margin-bottom: 0 !important;
}

.clients-title .bodymain p{
  margin-bottom: 16px !important; /* choose your exact gap */
}

/* kill any top spacing on the video section */
.clients-title + .hero{
  padding-top: 0 !important;
  margin-top: 0 !important;
}


.work-filters-row .filters-list button,
.work-filters-row .work-filter-all button{
  font-size: 18px !IMPORTANT; /* add this line (or increase if it exists) */
}


/* =========================================================
   WORK — force cards to match HOME "Latest from Koperativa"
   (put this at the END of the <style> in /work/index.php)
   ========================================================= */

body.work-page .latest-projects{
  padding: 9px 0 40px 0 !important; /* +9px pushes grid down */
}

body.work-page .projects-grid{
  gap: 16px !important;            /* matches homepage feel */
  row-gap: 16px !important;        /* overrides your row-gap:0 */
  column-gap: 16px !important;
  padding-bottom: 40px !important; /* matches homepage */
}

body.work-page .project-img{
  height: 252px !important;        /* matches homepage tweak */
}

body.work-page .project-title{
  margin-top: 22px !important;     /* matches homepage */
  margin-bottom: -1px !important;  /* matches homepage */
}

body.work-page .project-subtitle{
  margin-top: 4px !important;
  margin-bottom: 24px !important;  /* matches homepage */
}





/* SERVICES — force ALL titles to uppercase */

body.service-page .service-section-title,





body.service-page .ht2-title{
  text-transform: uppercase;
}


/* ============================
   WORK — project titles smaller (MOBILE ONLY)
   ============================ */



@media (max-width: 768px){
  .proj-title-main{
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-top: 34px !important;
    margin-bottom: -18px !important;
    max-width: 100% !important;
  }
}


/* ============================
   PROJECT PAGE — HEADER (MOBILE)
   ============================ */
@media (max-width: 768px){

  /* Hide vertical divider in project header */
  .client-divider{
    display: none;
  }

  /* Smaller client name on mobile */
  .client-name{
    font-size: 16px !IMPORTANT;
    line-height: 1.4;
    font-weight: 500;

  }

  /* Tighten spacing now that divider is gone */
  .proj-header-left{
    gap: 10px;
  }
}

@media (max-width: 768px){

  .client-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* … */
    max-width: 220px;        /* tweak as needed */
  }

}





@media (max-width: 768px){

  /* Smaller SHARE button on mobile */
  .share-btn{
    padding: 7px 22px;      /* was 9px 35px */
  }

  .share-label{
    font-size: 12px;        /* was 14px */
    letter-spacing: 0.06em; /* slightly tighter */
  }

  /* Optional: slightly smaller icons */
  .share-icon{
    width: 14px;
    height: 14px;
  }
}


/* ============================
   SHARE BUTTON — OPEN STATE
   ============================ */
.share-btn.is-open::before{
  transform: translateY(0);
}

.share-btn.is-open .share-label{
  color: #fff;
  opacity: 0;
  transform: translateY(-6px);
}

.share-btn.is-open .share-icon{
  opacity: 1;
  transform: translateY(0);
}


/* ============================
   SHARE BUTTON — MOBILE TAP STATE ONLY
   ============================ */
@media (max-width: 768px){

  .share-btn.is-open::before{
    transform: translateY(0) !important;
  }

  .share-btn.is-open .share-label{
    color: #fff !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
  }

  .share-btn.is-open .share-icon{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

}


/* ==========================================================
   SHARE — MOBILE: disable hover, use click (.is-open) only
   ========================================================== */
@media (max-width: 768px){

  /* 1) Turn OFF hover behavior on mobile */
  .share-btn:hover::before{ transform: translateY(-100%) !important; }
  .share-btn:hover .share-label{
    opacity: 1 !important;
    transform: translateY(0) !important;
    color: #000 !important;
  }
  .share-btn:hover .share-icon{
    opacity: 0 !important;
    transform: translateY(8px) !important;
  }

  /* 2) Turn ON click behavior (same visuals as desktop hover) */
  .share-btn.is-open::before{ transform: translateY(0) !important; }

  .share-btn.is-open .share-label{
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    color: #fff !important;
  }

  .share-btn.is-open .share-icon{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}



/* ==========================================================
   SHARE BUTTON — desktop uses hover, mobile uses .is-open
   ========================================================== */

/* 1) DESKTOP ONLY: keep your hover effect */
@media (hover: hover) and (pointer: fine){
  .share-btn:hover{
    background:#000;
    color:#fff;
  }
  .share-btn:hover .share-btn-icons{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2) TOUCH ONLY: kill hover behavior + use click (.is-open) */
@media (hover: none) and (pointer: coarse){

  /* neutralize any “sticky hover” on touch browsers */
  .share-btn:hover{
    background:#fff !important;
    color:#000 !important;
  }
  .share-btn:hover .share-btn-icons{
    opacity: 0 !important;
    transform: translateY(6px) !important;
  }

  /* make icons non-clickable when closed */
  .share-btn-icons{
    pointer-events: none;
  }

  /* OPEN state (what desktop hover looks like) */
  .share-btn.is-open{
    background:#000 !important;
    color:#fff !important;
  }
  .share-btn.is-open .share-btn-icons{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto; /* clickable now */
  }

  /* hide the label when open (so only icons show) */
  .share-btn.is-open .share-btn-label{
    opacity: 0 !important;
    transform: translateY(-6px) !important;
  }
}


/* =========================================================
   SERVICES — TESTIMONIALS (block design like screenshot)
   ========================================================= */
body.service-page .service-testimonials{
  background: #efefef;
  padding: 110px 0;
}

body.service-page .service-testimonials-title{
  font-family: "Whyte", sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 55px 0;
}

body.service-page .service-testimonials-intro{
  max-width: 900px;
  margin: 0 auto 36px auto;
  text-align: center;
}

body.service-page .service-testimonials-intro p{
  margin: 0;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 20px;
  line-height: 1.7;
  opacity: .85;
}

/* the big white card */
body.service-page .service-testimonial-card{
  background: #fff;
  border-radius: 18px;
  padding: 54px 70px;
  max-width: 1150px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* quote */
body.service-page .service-testimonial-quote p{
  margin: 0;
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  line-height: 1.6;
  color: #000;
}

/* footer (photo + name) */
body.service-page .service-testimonial-footer{
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 60px;
}

body.service-page .service-testimonial-photo{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
  background: #e6e6e6;
  flex: 0 0 86px;
}

body.service-page .service-testimonial-name{
  font-family: "PPNeueMontreal", sans-serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 10px 0;
}

body.service-page .service-testimonial-role,
body.service-page .service-testimonial-company{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 18px;
  line-height: 1.45;
  opacity: .85;
}

/* Mobile */
@media (max-width: 768px){
  body.service-page .service-testimonials{ padding: 80px 0; }
  body.service-page .service-testimonials-title{
    font-size: 40px;
    margin-bottom: 28px;
  }
  body.service-page .service-testimonial-card{
    padding: 32px 22px;
  }
  body.service-page .service-testimonial-footer{
    margin-top: 34px;
    gap: 18px;
  }
  body.service-page .service-testimonial-role,
  body.service-page .service-testimonial-company{
    font-size: 16px;
  }
}


/* WORK filters: keep "Të gjitha" on one line */
.work-filter-all button{
  white-space: nowrap;
}







/* =========================================================
   TRUSTED BY (Services block type: trusted_by) — REFINED
   ========================================================= */

body.service-page .service-section.type-trusted_by{
  padding-top: 90px;
  padding-bottom: 90px;
}

/* main text above logos */
body.service-page .service-trusted-text{
  font-family: "PPNeueMontrealBook", sans-serif;
  font-size: 22px;
  line-height: 1.45;
  text-align: center;
  max-width: 950px;
  margin: 0 auto 34px;
}

/* subtitle "Trusted by:" — NOT ALL CAPS */
body.service-page .service-trusted-subtitle{
  font-family: "PPNeueMontreal", sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  margin: 0 auto 34px;
  color: #000;
}

/* logos row — scalable, gap-safe, width-safe */
body.service-page .service-trusted-logos{
  display: flex;
  align-items: center;
  justify-content: center;     /* center group */
  gap: 20px;                   /* ✅ minimum guaranteed gap */
  width: 100%;
  max-width: 1150px;           /* ✅ never exceed design width */
  margin: 0 auto;
  padding: 0;
  flex-wrap: nowrap;           /* single row on desktop */
}

/* each logo box */
body.service-page .service-trusted-logo{
  flex: 0 1 auto;              /* ✅ allow logos to shrink */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo image — scalable but capped */
body.service-page .service-trusted-logo img{
  max-height: 56px;
  max-width: 120px;            /* ✅ ensures row never overflows */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 1;                  /* ✅ FULL opacity */
}

/* responsive: wrap gracefully */
@media (max-width: 1100px){
  body.service-page .service-trusted-logos{
    flex-wrap: wrap;
    gap: 48px;
    row-gap: 30px;
  }
}

@media (max-width: 640px){
  body.service-page .service-trusted-logos{
    gap: 30px;
    row-gap: 22px;
  }
  body.service-page .service-trusted-subtitle{
    font-size: 26px;
  }
}



/* logos row — scalable, gap-safe, width-safe */
body.service-page .service-trusted-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0;
  flex-wrap: nowrap;
  overflow: hidden; /* ✅ hard stop: never show outside 1150 */
}

/* logo image — scalable but capped */
body.service-page .service-trusted-logo img{
  max-height: 56px;
  max-width: 95px;  /* ✅ smaller so more logos fit inside 1150 */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 1;
}

/* =========================================
   SERVICES — TESTIMONIALS (FULL WIDTH)
   ========================================= */

/* break testimonials out of the container */
body.service-page .service-section.type-testimonials{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw); /* 🔑 escape container */
  margin-right: calc(50% - 50vw);
  background: #f2f2f2;           /* or whatever your grey is */
  padding: 90px 0;
}







/* keep testimonial content readable */
body.service-page .service-section.type-testimonials .testimonial-inner,
body.service-page .service-section.type-testimonials .container{
  max-width: 1150px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}