/* Template Name: Home */
.hero-image {
    background-image: url('../_img/home-hero-cover.jpg');
    background-size: cover;
    background-position: center center;
}
.who-we-are {
    position: relative;
    display: block;
    width: 100%;
    height: 160px; /* space to place who/we/are vertically */
    margin: 0 auto 10px;
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    /* soft shadow for better legibility over video */
    text-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* stack the words and position them relative to the centerline */
.who-we-are .who,
.who-we-are .we,
.who-we-are .are {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    white-space: nowrap;
    font-weight:200;
}

/* 'We' sits on the centerline and is larger; use clamp for responsive scaling */
.who-we-are .we {
    top: 50%;
    transform: translate(-46%, -50%);
    font-size: 180px;
}

.who-we-are .who {
    top: 40%;
    transform: translate(-184%, -50%);
    font-size: 70px;
}

.who-we-are .are {
    top: 60%;
    transform: translate(125%, -60%);
    font-size: 70px;
}
.who-we-are-container {
    margin-left:0;
}
.who-we-are-container .heading {
    padding: 80px;
}
@media screen and (max-width: 600px) {
.who-we-are-container .heading {
    padding: 80px 20px;
    text-align: center;
    }
}
/* Triangles */
.triangles-overlay {
    object-fit: cover;
    width: 1400px;
    object-position: left;
}

.triangles-overlay, .heading-orange {
    left:-25px;
}
@media screen and (max-width: 900px) {
    .triangles-overlay, .heading-orange {
        left:-150px;
    }
}
@media screen and (max-width: 600px) {
    .triangles-overlay, .heading-orange {
        left:0px;
    }
}

/* Mobile (<=600px): use the video's poster as the hero background and do not play/show the video
   This keeps the triangles overlay visible while preventing the video from displaying on small devices. */
@media screen and (max-width: 600px) {
    .hero-section > .relative {
        background-image: url('../_img/home-hero-cover.jpg');
        background-size: cover;
        background-position: center center;
    }
    /* Hide the actual <video> element so the poster/background is shown instead */
    .hero-section video {
        display: none !important;
    }
    /* Ensure overlaying UI (triangles, headings) appears above the background */
    .hero-section .relative .triangles-overlay,
    .hero-section .relative .heading,
    .hero-section .relative .heading-orange {
        position: relative;
        z-index: 2;
    }
}
/* On very small screens, reduce the size and reposition the h1 heading */

@media screen and (max-width:465px) {
	.who-we-are .who {
		transform: scale(0.8);
		left: calc(20% - 46.00px);
	}
	.who-we-are .we {
		transform:scale(0.8);
		left: calc(50% - 74.705px);
		top: 20%;
	}
	.who-we-are .are {
		transform:scale(0.8);
			left: calc(80% - 36.75px);
	}
    .design-experts {
    display: block;
    text-transform: uppercase;
    font-family: 'proxima-nova', sans-serif;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
    font-size: clamp(1rem, 8vw, 3.3rem); /* adjust range as needed */
    padding-bottom: 1rem;
    }
}

/* Services */
.services {
    max-width: 860px;
    margin: 0 auto 40px;
    font-family: 'Myriad Pro Regular', sans-serif;
    color: var(--mchale-grey);
    line-height: 1.6;
}
/* Intro Section Mobile */
.intro-section-mobile {
    display: none;
}
@media (max-width: 900px) {
    .intro-section-desktop {
        display: none;
    }
    .intro-section-mobile {
        display: block;
        padding: 0 16px;
        margin-bottom: 40px;
    }
}


/* Portfolio section: responsive grid with interactive tiles
   Using aspect-ratio on tiles so their height is derived from their width.
   Grid rows are content-sized (auto) so the container will match tile heights. */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns on desktop */
    gap: 5px;
    align-items: stretch;
    width: 100%;
    grid-auto-rows: auto; /* rows size to tile content (tiles set their own aspect-ratio) */
}

/* Portfolio tile (link) */
.portfolio-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0;
    /* Use aspect-ratio so height is proportional to width (matches previous layout where
       tile height was column-width / 2). aspect-ratio: 2 / 1 means width is twice height. */
    aspect-ratio: 2 / 1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    background: #000;
}

.portfolio-tile .tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 450ms cubic-bezier(.2,.9,.2,1), background-image 300ms ease;
}

.portfolio-tile .tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    padding: 18px;
    opacity: 0;
    transition: opacity 280ms ease, background 280ms ease;
}

.portfolio-tile .tile-title {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
    font-family: proxima-nova, sans-serif;
    line-height: 1;
}
.portfolio-tile .tile-desc {
    color: rgba(255,255,255,0.9);
    line-height: 1;
    padding-bottom: 8px;
}

/* Hover / focus interactions */
.portfolio-tile:hover .tile-bg,
.portfolio-tile:focus .tile-bg {
    transform: scale(1.15); /* zoom 15% */
}
.portfolio-tile:hover .tile-overlay,
.portfolio-tile:focus .tile-overlay {
    opacity: 1;
}
.portfolio-tile .trusted-triangle {
    width: 18px;
    height: 18px;
}

/* Portfolio item background images */
.portfolio-item-1 .tile-bg { background-image: url(../_img/portfolio1.jpg); }
.portfolio-item-2 .tile-bg { background-image: url(../_img/portfolio2.jpg); }
.portfolio-item-3 .tile-bg { background-image: url(../_img/portfolio3.jpg); }
.portfolio-item-4 .tile-bg { background-image: url(../_img/portfolio4.jpg); }
.portfolio-item-5 .tile-bg { background-image: url(../_img/portfolio5.jpg); }
.portfolio-item-6 .tile-bg { background-image: url(../_img/portfolio6.jpg); }
.portfolio-item-7 .tile-bg { background-image: url(../_img/portfolio7.jpg); }
.portfolio-item-8 .tile-bg { background-image: url(../_img/portfolio8.jpg); }
.portfolio-item-9 .portfolio-tile-9a .tile-bg { background-image: url(../_img/portfolio9a.jpg); }
.portfolio-item-9 .portfolio-tile-9b .tile-bg { background-image: url(../_img/portfolio9b.png); }
.portfolio-item-10 .tile-bg { background-image: url(../_img/portfolio10.jpg); }
.portfolio-item-11 .tile-bg { background-image: url(../_img/portfolio11.jpg); }

/* Portfolio item hover background images */
.portfolio-item-1:hover .tile-bg,
.portfolio-item-1:focus .tile-bg { background-image: url(../_img/portfolio1-hover.jpg); }
.portfolio-item-2:hover .tile-bg,
.portfolio-item-2:focus .tile-bg { background-image: url(../_img/portfolio2-hover.jpg); }
.portfolio-item-3:hover .tile-bg,
.portfolio-item-3:focus .tile-bg { background-image: url(../_img/portfolio3-hover.jpg); }
.portfolio-item-4:hover .tile-bg,
.portfolio-item-4:focus .tile-bg { background-image: url(../_img/portfolio4-hover.jpg); }
.portfolio-item-5:hover .tile-bg,
.portfolio-item-5:focus .tile-bg { background-image: url(../_img/portfolio5-hover.jpg); }
.portfolio-item-6:hover .tile-bg,
.portfolio-item-6:focus .tile-bg { background-image: url(../_img/portfolio6-hover.jpg); }
.portfolio-item-7:hover .tile-bg,
.portfolio-item-7:focus .tile-bg { background-image: url(../_img/portfolio7-hover.jpg); }
.portfolio-item-8:hover .tile-bg,
.portfolio-item-8:focus .tile-bg { background-image: url(../_img/portfolio8-hover.jpg); }
.portfolio-item-9 .portfolio-tile-9a:hover .tile-bg,
.portfolio-item-9 .portfolio-tile-9a:focus .tile-bg { background-image: url(../_img/portfolio9a-hover.jpg); }
.portfolio-item-9b .portfolio-tile-9b:hover .tile-bg,
.portfolio-item-9b .portfolio-tile-9b:focus .tile-bg { background-image: url(../_img/portfolio9b-hover.jpg); }
.portfolio-item-10:hover .tile-bg,
.portfolio-item-10:focus .tile-bg { background-image: url(../_img/portfolio10-hover.jpg); }
.portfolio-item-11:hover .tile-bg,
.portfolio-item-11:focus .tile-bg { background-image: url(../_img/portfolio11-hover.jpg); }
/* Helper class: make a specific item start in column 1 */
.start-col-1 {
    grid-column-start: 1;
}
/* Helper class: make a specific item start in column 2 */
.start-col-2 {
    grid-column-start: 2;
}  
/* Helper class: make a specific item start in column 3 */
.start-col-3 {
    grid-column-start: 3;
}
/* Helper class: make a specific item start in row 1 */
.start-row-1 {
    grid-row-start: 1;
}
/* Helper class: make a specific item start in row 2 */
.start-row-2 {
    grid-row-start: 2;
}
/* Helper class: make a specific item start in row 3 */
.start-row-3 {
    grid-row-start: 3;
}
/* Helper class: make a specific item start in row 4 */
.start-row-4 {  
    grid-row-start: 4;
}
/* Helper class: make a specific item start in row 5 */
.start-row-5 {  
    grid-row-start: 5;
}
/* Helper class: make a specific item start in row 6 */
.start-row-6 {  
    grid-row-start: 6;
}
/* Helper class: make a specific item start in row 7 */
.start-row-7 {  
    grid-row-start: 7;
}
/* Helper class: make a specific item start in row 8 */
.start-row-8 {  
    grid-row-start: 8;
}  
/* Helper class: make a specific item start in row 9 */
.start-row-9 {  
    grid-row-start: 9;
}
/* Helper class: make a specific item start in row 10 */
.start-row-10 {  
    grid-row-start: 10;
}

/* Helper class: make a specific item span 1 row (normal height) */
.span-rows-1 {
    grid-row: span 1;
}
/* Helper class: make a specific item span 2 rows (double-height) */
.span-rows-2 {
    grid-row: span 2;
}
/* Helper class: make a specific item span 3 rows (triple-height) */
.span-rows-3 {
    grid-row: span 3;
}
/* Helper class: make a specific item span 1 column (normal width) */
.span-cols-1 {
    grid-column: span 1;
}
/* Helper class: make a specific item span 2 columns (double-width) */
.span-cols-2 {
    grid-column: span 2;
}
/* Helper class: make a specific item span 3 columns (triple-width) */
.span-cols-3 {
    grid-column: span 3;
}

/* Responsive: switch to 2 columns on medium screens */
@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* With aspect-ratio on tiles we let rows size to content */
        grid-auto-rows: auto;
    }
}

/* Mobile-specific portfolio grid (1 column). We keep the original desktop grid
   and only show this variant at <=900px to simplify ordering and sizing. */
.portfolio-grid-mobile { display: none; }
@media (max-width: 900px) {
    .portfolio-grid { display: none !important; }
    .portfolio-grid-mobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        width: 100%;
    }
    .portfolio-grid-mobile .portfolio-tile {
        aspect-ratio: 1 / 1; /* square tiles on mobile */
        height: auto;
    }
    /* ensure stacked tile wrapper doesn't interfere on mobile */
    .portfolio-stack { display: none; }
}

/* Make all tiles uniform height on medium screens (<=900px) so placement/order
   doesn't create rows with mismatched heights. This prevents items like
   portfolio-item-10 appearing a different height than portfolio-item-7. */
@media (max-width: 900px) {
    .portfolio-grid {
        /* create equal row tracks so each row uses the same fraction */
        grid-auto-rows: 1fr;
    }
    .portfolio-grid .portfolio-tile,
    .portfolio-grid .portfolio-stack,
    .portfolio-grid .stacked-tile {
        /* stretch each tile to fill its grid cell */
        height: 100%;
        align-self: stretch;
    }
    /* force square tiles at tablet sizes for visual consistency */
    .portfolio-grid .portfolio-tile {
        aspect-ratio: 1 / 1 !important;
    }
}

/* Disable fixed start-column helpers on narrower (tablet) layouts so items don't
   create implicit columns (e.g. start-col-3 when only 2 columns are defined). */
@media (max-width: 900px) {
    .start-col-1, .start-col-2, .start-col-3 {
        grid-column-start: auto;
    }
}

/* Ensure consistent column spans at tablet sizes: default every tile to span 1 column,
   and only allow explicit .span-cols-2 items to span 2 columns. This prevents
   accidental wider tiles caused by placement rules. */
@media (max-width: 900px) {
    .portfolio-grid .portfolio-tile {
        grid-column: span 1 !important;
    }
    .portfolio-grid .span-cols-2 {
        grid-column: span 2 !important;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* single column on very small screens */
        grid-auto-rows: auto; /* let content define height */
    }
    /* On very small screens tiles keep their aspect-ratio but may be overridden if needed */
    .portfolio-tile .tile-title { font-size: 1rem; }
}

/* If you need item-specific sizes/placement, add rules like:
    .portfolio-item-3 { grid-row: span 2; } or add .span-rows-2 on the element.
*/ 
/* Responsive: switch long tiles to normal height on medium and small screens */
@media (max-width: 900px) {
    .span-rows-3 {
        grid-row: span 2;
    }
}
/* Responsive: switch normal height tiles to smaller height on medium and small screens */
@media (max-width: 900px) {
    .span-rows-2 {
        grid-row: span 1;
    }
}
/* Responsive: switch all tiles to normal height on small screens */
@media (max-width: 600px) {
    .span-rows-3, .span-rows-2, .span-rows-1 {
        grid-row: span 2;
    }
}

/* Map span helpers to taller aspect ratios so tiles retain proportional heights
   when grid rows are content-sized. Base tile aspect-ratio is 2/1 (width / height = 2).
   For N-row tiles the needed aspect-ratio = 2 / N (derived so height = N * base-row-height). */
.span-rows-1 { aspect-ratio: 2 / 1; }
.span-rows-2 { aspect-ratio: 1 / 1; } /* default for single-column items spanning 2 rows */
/* If an item spans 2 columns and 2 rows, its width = 2*col, height = 2*row -> aspect stays 2/1 */
.span-cols-2.span-rows-2 { aspect-ratio: 2 / 1; }
.span-rows-3 { aspect-ratio: 2 / 3; } /* default for single-column items spanning 3 rows */
/* If an item spans 2 columns and 3 rows its aspect-ratio becomes (2*2)/3 = 4/3 */
.span-cols-2.span-rows-3 { aspect-ratio: 4 / 3; }

/* Keep aspect-ratio mappings at tablet sizes so tiles retain proportional heights
   when the grid switches to 2 columns. On mobile (<=600px) force 1/1 square tiles. */
@media (max-width: 600px) {
    .span-rows-1, .span-rows-2, .span-rows-3, .span-cols-2.span-rows-2, .span-cols-2.span-rows-3, .portfolio-tile {
        aspect-ratio: 1 / 1;
    }
}

/* Constrain textual content to a readable line length without forcing .container
   to be narrow. Use .content inside full-width containers where you want
   centered, capped text lines. */
.content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; /* ensure padding doesn't push past max-width */
}

/* Ensure headings anchor to the left edge of .content wrappers */
.heading {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0; /* explicitly anchor to left */
    margin-right: 0;
}
/*
.heading-orange {
        background: linear-gradient(
        to right,
        rgba(255, 103, 2, 0.699) 0%,
        rgba(255, 105, 2, 0.699) 40%,
        rgba(255, 105, 2, 0) 60%,
        rgba(255, 105, 2, 0) 100%
    );
    padding: 20px 0;
    height: 300px;
    width: 100%;
}
*/
/* Visual guide for QA: enable by adding `show-content-guides` to the <body>
   Example: <body class="show-content-guides"> ... </body>
   This keeps the guide out of production unless you opt into it. */
.show-content-guides .content {
    outline: 2px dashed rgba(255,165,0,0.9);
    outline-offset: 6px;
    position: relative; /* for the label */
}
.show-content-guides .content::after {
    content: "CONTENT MAX 900px";
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(255,255,255,0.95);
    color: rgb(180,80,0);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.show-content-guides .heading {
    box-shadow: inset 6px 0 0 rgba(255,165,0,0.6); /* left-edge marker */
}

/* allow taller logos to be a bit taller when marked vertical */
.trusted-item.img-vertical img {
    max-height: 60px;
}

/* Stack container for splitting a single grid cell into two vertical tiles */
.portfolio-stack {
    display: grid;
    grid-template-rows: 1fr 1fr; /* two equal height rows */
    gap: 5px; /* keep the same gutter between the two halves */
    align-items: stretch;
    width: 100%;
}

/* When using stacked tiles, prevent the anchors from using the base .portfolio-tile aspect
   ratio because the stack defines height. Make each stacked tile fill its grid cell. */
.portfolio-stack .stacked-tile {
    aspect-ratio: auto; /* allow height from grid row */
    height: 100%;
    display: block;
    position: relative;
}

/* Ensure the internal .tile-bg and overlay still cover the stacked tile */
.portfolio-stack .stacked-tile .tile-bg,
.portfolio-stack .stacked-tile .tile-overlay {
    position: absolute;
    inset: 0;
}

/* Small responsive fallback: on narrow screens revert the stack to normal single-column tiles */
@media (max-width: 900px) {
    .portfolio-stack {
        display: block; /* each anchor will flow as a normal block within the column */
    }
    .portfolio-stack .stacked-tile {
        aspect-ratio: 2 / 1; /* fall back to standard tile aspect on tablet */
        margin-bottom: 5px;
    }

    /* allow taller logos to be a bit taller when marked vertical */
    .trusted-item.img-vertical img {
        max-height: 60px;
    }
    .trusted-item.img-horizontal img {
        max-height: 32px; /* constrain very wide logos */
    }
}
@media (max-width: 900px) {
    .trusted-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .trusted-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .trusted-item img { max-height: 48px; }
}

/* Testimonials section */
.testimonials-section {
    background: #F0F0F1;
    color: var(--mchale-grey);
}
.testimonials-section .container {
    display: flex;
    align-items: center; /* center vertically */
}
.testimonials-section .testimonials-slider {
    padding: 0 150px; /* space for quote icons */
}
@media screen and (max-width: 900px) {
    .testimonials-section .container {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    .testimonials-section .testimonials-slider {
        padding: 0 48px; /* space for quote icons */
    }
}
.testimonial {
    display: none;
    transition: opacity 300ms ease;
}
.testimonial.active {
    display: block;
}
.testimonials-slider { text-align: left; }
.testimonials-slider .testimonial { display: none; }
.testimonials-slider .testimonial.active { display: block; }
.testimonial-quote p {
    font-weight: 400;
    max-width: 600px;
    margin: 6px 0; /* left-align content inside the centered slider */
    line-height: 1.4;
    text-align: left;
}
.testimonial-name {
    margin-top: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mchale-grey); /* name color matches text */
    background: transparent; /* remove pill background */
    display: block;
    padding: 0 16px;
}
.testimonial-controls {
    width: 600px;
    margin: 12px auto 0; /* center the controls bar but left-align buttons */
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}
.testimonial-controls button {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.08);
    color: #444;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.testimonial-controls button:hover { background: rgba(0,0,0,0.04); }

@media (max-width: 600px) {
    .testimonial-quote p { font-size: 16px; }
    .testimonial-name { font-size: 14px; }
}

/* decorative quote icons positioning relative to .content
   icons are 75px from left/right content borders and ~30px above/below */
.testimonials-section .content { position: relative; }
.testimonial-ldquo,
.testimonial-rdquo { position: absolute; width: 66px; height: 66px; }
.testimonial-ldquo { left: 75px; top: -70px; }
.testimonial-rdquo { right: 75px; bottom: -70px; }

@media (max-width: 900px) {
    .testimonial-ldquo { left: 48px; top: -20px; }
    .testimonial-rdquo { right: 48px; bottom: -20px; }
    .testimonial-quote p { max-width: 520px; font-size: 22px; }
}
@media (max-width: 600px) {
    .testimonial-ldquo, .testimonial-rdquo { display: none; }
    .testimonial-quote p { max-width: 100%; font-size: 18px; }
}

/* If you prefer a named container variant that stays full-width generally
   but can be narrowed for specific sections, add and use `container--narrow`:
   <div class="container container--narrow">...
*/
.container--narrow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* How we do it section: 4 columns (40% / 20% / 20% / 20%) */
.how-we-do {
    background: rgb(255, 105, 2); /* solid orange background */
    color: #fff; /* content will be white */
    padding: 28px 0;
}
.how-we-do .how-grid {
  display: grid;
  /* preserve the 49:17:17:17 ratio using fr units */
  grid-template-columns: 2.88fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 0 16px;
  box-sizing: border-box;
}
.how-we-do .how-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.how-we-do .how-col:hover .icon, .how-we-do .how-col:focus .icon, .how-we-do .how-col:hover h3, .how-we-do .how-col:focus h3, .how-we-do .how-col:hover p, .how-we-do .how-col:focus p  {
    transform: scale(1.1);
    transition: transform 200ms ease;
}

.how-we-do h2, .how-we-do h3 {
    color: #ffffff;
    margin: 0;
}
.how-we-do h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.how-we-do h3 {
    font-size: 1.1rem;
    font-weight: 700;
}
.how-we-do p {
    margin: 0;
    color: rgba(255,255,255,0.95);
    line-height: 1.4;
}
.how-we-do .icon {
    font-size: 28px;
    width: 65px;
    height: 65px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* SVG icons for the how-we-do section */
.how-we-do .how-icon {
    width: 65px;
    height: 65px;
    display: block;
}

@media (max-width: 900px) {
    .how-we-do .how-icon {
        width: 34px;
        height: 34px;
    }
}
.how-we-do .trusted-triangle {
    fill: #fff;
    stroke: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
}
.how-we-do .trusted-triangle polygon {
    /* ensure polygon uses white fill instead of the global orange */
    fill: #ffffff;
    stroke: #ffffff;
}
.how-we-do .btn-watch {
    display: inline-flex; /* put triangle left and text right */
    align-items: center;
    gap: 5px;
    color: #fff;
    padding: 11px 8px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    width: max-content;
    border: 2px solid #ffffff; /* keep visible outline */
}
.how-we-do .btn-watch:hover,
.how-we-do .btn-watch:focus {
    background: rgba(255,255,255,0.12);
}

/* Capabilities section */
.capabilities-section {
    background: #fff;
}
.capabilities-row {
    display: grid;
    grid-template-columns: 60% 40%; /* image column = 50% of the row */
    gap: 24px;
    align-items: center;
}
.cap-image { width: 100%; }
.cap-image img { width: 100%; height: auto; display: block; position:relative; right: 0; }
.cap-content { padding: 0 16px; height: 100%; }
.cap-heading { text-transform: lowercase; }
.cap-what-wrapper {
    height: 100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
}
.cap-what {
    color: var(--mchale-grey); /* same style as How We Do It but gray */
    margin-top: 8px;
    font-size:75px;
    line-height: 1;
}
.cap-paragraph {
    color: var(--mchale-grey); /* testimonial-like paragraph color */
    margin-top: 12px;
    font-size: 1.2rem;
}

@media (max-width: 900px) {
    .capabilities-row { grid-template-columns: 1fr; }
    .cap-image img { margin-bottom: 12px; }
}

/* Case Study section: image pinned to the viewport right edge */
.case-study-section {
    background: #fff;
    color: #242424;
    position: relative; /* allow absolute positioning of the image to the viewport edge */
    overflow: visible;
    min-height: 360px; /* ensure the image has vertical space to fill */
}
.case-study-section .container {
    position: relative;
}
.case-study-row {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 24px;
    align-items: center;
}
.case-image { width: 50%; }
/* Pin the image to the right edge of the viewport by absolutely positioning it
   within the section. It will occupy half the section's width. */
.case-study-section .case-image {
    position: absolute;
    top: 0;
    right: 0; /* flush to viewport right edge */
    height: 100%;
    width: 50%;
}
.case-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.case-study-row .case-content { grid-column: 1; padding: 0 16px; margin-right: 50%; }
.case-what {
    font-family: 'Gotham HTF Bold', sans-serif;
    color: var(--mchale-grey);
    margin-top: 8px;
}
.case-paragraph {
    color: var(--mchale-grey);
    margin-top: 12px;
    font-family: 'Myriad Pro Regular', sans-serif;
}
.btn-case-see {
    margin-top: 16px;
    padding: 10px 14px;
    border: 2px solid #FF6902;
    color: #FF6902;
    background: transparent;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
}
.btn-case-see-icon { stroke: #FF6902; fill: #FF6902; }

@media (max-width: 900px) {
    .case-study-row { grid-template-columns: 1fr; }
    .case-image img { margin-bottom: 12px; }
    .case-study-section .case-image { position: static; width: 100%; height: auto; margin-bottom: 12px; }
    .case-study-row .case-content { margin-right: 0; }
}

/* Responsive: stack columns on small screens */
@media (max-width: 900px) {
    .how-we-do .how-grid {
        grid-template-columns: 1fr 1fr; /* stack */
    }
    .how-we-do {
        padding: 36px 0;
    }
}
.how-we-do h2 {
    text-align: left;
    font-size: 125px;
    font-weight:100;
} 
@media (max-width: 900px) {
    .how-we-do h2 {
        font-size: 48px;
        line-height: 1;
    }
}
.how-we-do h3 {
    font-size: 30px;
    text-align: left;
    line-height: 1;
}
.how-we-do p {
    font-size: 16px;
    text-align: left;
    max-width: 300px;
    line-height: 1;
    padding: 0 20px 0 0;
}
.capabilities-section .trusted-heading-wrapper, .case-study-section .trusted-heading-wrapper {
    position: absolute;
    display:flex;
    justify-content:flex-start;
} 
h2.cap-what {
    text-align: left;
    font-size: 125px;
    font-weight:100;
    padding-top:30px;
}
.case-study-section h2.cap-what {
    font-size: 90px;
}
p.cap-paragraph {
    padding:0;
}
.case-study-section .cap-content {
    padding-left:45px;
}
@media (max-width: 900px) {
    .case-study-section .cap-content {
        padding:0;
    }
}
.case-study-section .trusted-heading-wrapper  {
    display:flex;
    justify-content:flex-start;
}
.case-study-section .cap-image {
    width: 100%;
}