/* Template Name: About */

/*
.nav-down-arrow {
    position: absolute;
    left: 32%;
    transform: translateX(-50%);
    display: block;
    width: 25px;
    height: 25px;
    top: 52px;
}
*/
/* Hero media: cover image with hover-preview and lightbox */
.hero-media { position: relative; min-height: 360px; }
.hero-media .hero-cover,
.hero-media .hero-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media .hero-preview { opacity: 0; transition: opacity 320ms ease; pointer-events: none; }
.hero-media .hero-cover { transition: opacity 320ms ease; }

/* Play button centered */
.hero-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 5; }
.hero-play-btn svg,
.hero-play-btn img { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); display: block; }

/* Default (desktop) icon size so SVG/PNG without intrinsic sizing doesn't collapse */
.hero-play-btn svg, .hero-play-btn img { width: 80px; height: 80px; }
.hero-play-btn:focus { outline: 2px solid rgba(255,105,2,0.9); outline-offset: 6px; }

/* Lightbox */
.video-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2000; }
.video-lightbox.open { display: flex; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.video-lightbox__panel { position: relative; max-width: 1100px; width: calc(100% - 48px); max-height: 80vh; z-index: 2001; }
.video-lightbox__player { width: 100%; height: 100%; display: block; background: #000; }
.video-lightbox__close { position: absolute; top: -36px; right: 0; background: transparent; border: 0; color: #fff; font-size: 22px; cursor: pointer; }

/* Responsive tweaks */
@media (max-width: 900px) {
	.hero-media { min-height: 260px; }
	.hero-play-btn svg, .hero-play-btn img { width: 64px; height: 64px; }
}

@media (max-width: 600px) {
	.hero-media { min-height: 200px; }
	.video-lightbox__panel { width: calc(100% - 28px); }
}
/* About Content Section */

.about-text h1 {
    font-size: 75px;
    margin-bottom: 24px;
    color: var(--mchale-grey);
}
.about-text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 16px;
}  

/* About Grid Section */
.about-grid { display: grid; grid-template-columns: 66.6% 33.4%; gap: 32px; margin-top: 32px; }
.about-grid__item { position: relative; overflow: hidden; }
.about-grid__item img { width: 100%; height: auto; display: block;
  object-fit: cover; transition: transform 320ms ease; }

/* About Team Grid Section */
.about-team-grid {
  display: grid;
  /* Use fractional units instead of percentages to account for gaps */
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 5rem;
  margin-bottom: 0.5rem;
  align-items: start;
  box-sizing: border-box;
}
.about-team-grid__item { position: relative; overflow: hidden; width:100%; aspect-ratio:1/1; }
.about-team-grid__item img { width: 100%; height: auto; display: block;
  object-fit: cover; transition: transform 320ms ease; }

/* team tile backgrounds moved from inline styles into CSS. Each tile has
   a base background and a hover background (second image). The .tile-bg
   uses a pseudo-element for the hover image so we can fade it in smoothly. */
.about-team-grid__item .tile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: block;
}
.about-team-grid__item .tile-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 280ms ease;
}
.about-team-grid__item .tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
    gap: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)),;
	color: #fff;
	opacity: 0;
    line-height: 1;
    transition: opacity 280ms ease, background 280ms ease;
}
.about-team-grid__item:hover .tile-bg::after,
.about-team-grid__item:focus-within .tile-bg::after {
	opacity: 1;
}
.about-team-grid__item:hover .tile-overlay,
.about-team-grid__item:focus-within .tile-overlay {
	opacity: 1;
}
.about-team-intro {
	/* span two columns on desktop */
	grid-column: 1 / span 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.about-team-intro p {
    font-family: 'Myriad Pro Regular', sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 16px;
    color: var(--mchale-grey);
    width: 66.6%;
    padding: 0;
}
.about-team-intro h1 {
    font-family: "proxima-nova-extra-condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 120px;
    margin-bottom: 24px;
    color: var(--mchale-grey);
    text-transform: uppercase;
    line-height: .8;
}
.title-role-wrapper, .minority-owned-wrapper, .trusted-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* remove space between triangle and heading */
}
.minority-owned-wrapper .trusted-triangle {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
.trusted-heading-wrapper {
    display: flex;
    align-items: center;
}
.title-role {
    text-transform:uppercase;
}
.trusted-triangle polygon {
    fill: var(--mchale-orange);
}
.trusted-triangle {
    stroke: var(--mchale-orange);
}
/* Make the first visible team tile taller so the first row becomes ~33% taller
   than the default square tiles. The row height is determined by the tallest
   item in the row (grid tracks auto-size to content), so increasing #team-0's
   aspect-ratio will expand the first row and the intro (which spans two
   columns) will stretch to match. */
#team-0 {
    aspect-ratio: 3 / 4; /* width / height = 0.75 -> height ≈ 1.33 × width */
}

@media (max-width: 900px) {
	/* On smaller screens, stack the intro and keep tiles square */
	.about-team-intro { grid-column: 1 / -1; padding: 18px; }
	#team-0 { aspect-ratio: 1 / 1; }
}

/* Tablet: make the team grid 2 columns (tablet breakpoint) */
@media (max-width: 900px) {
    .about-team-grid {
        grid-template-columns: 1fr 1fr; /* two columns on tablet */
        gap: 8px;
    }
}

/* Mobile: single column layout for team grid */
@media (max-width: 600px) {
    .about-team-grid {
        grid-template-columns: 100%; /* single column on mobile */
        gap: 12px;
    }
    .about-team-grid__item { aspect-ratio: 1 / 1; }
    .about-team-intro { grid-column: 1 / -1; }
    .about-team-intro p { width: 100%; }
    .about-team-intro h1 { font-size: 64px; }
}
.tile-name {
    font-family: 'Gotham HTF Bold Condensed', sans-serif;
    font-size: 2.1rem;
    text-align: center;
}
.tile-role {
    font-family: 'proxima-nova', sans-serif;
    font-size: .95rem;
    text-align: center;
    text-transform: uppercase;
}
.tile-coffee {
    font-family: 'proxima-nova-extra-condensed', sans-serif;
    font-size: .8rem;
    text-align: center;
    padding-top: 8px;
}
.title-role-wrapper {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/* Per-team images: base image in .tile-bg, hover image in ::after */


#team-0 .tile-bg { background-image: url('../_img/about-joe-campos-1a.jpg'); }
#team-0 .tile-bg::after { background-image: url('../_img/about-joe-campos-1-hover.jpg'); }

#team-1 .tile-bg { background-image: url('../_img/about-team-member-1.jpg'); }
#team-1 .tile-bg::after { background-image: url('../_img/about-team-member-1-hover.jpg'); }
#team-2 .tile-bg { background-image: url('../_img/about-team-member-2.jpg'); }
#team-2 .tile-bg::after { background-image: url('../_img/about-team-member-2-hover.jpg'); }

#team-3 .tile-bg { background-image: url('../_img/about-team-member-3.jpg'); }
#team-3 .tile-bg::after { background-image: url('../_img/about-team-member-3-hover.jpg'); }

#team-4 .tile-bg { background-image: url('../_img/about-team-member-4.jpg'); }
#team-4 .tile-bg::after { background-image: url('../_img/about-team-member-4-hover.jpg'); }

#team-5 .tile-bg { background-image: url('../_img/about-team-member-5.jpg'); }
#team-5 .tile-bg::after { background-image: url('https://dev.mchaledesign.com/wp-content/uploads/2025/11/about-team-member-5-hover.jpg'); }

#team-6 .tile-bg { background-image: url('../_img/about-team-member-6.jpg'); }
#team-6 .tile-bg::after { background-image: url('../_img/about-team-member-6-hover.jpg'); }
#team-7 .tile-bg { background-image: url('../_img/about-team-member-7.jpg'); }
#team-7 .tile-bg::after { background-image: url('../_img/about-team-member-7-hover.jpg'); }

#team-8 .tile-bg { background-image: url('../_img/about-team-member-8.jpg'); }
#team-8 .tile-bg::after { background-image: url('../_img/about-team-member-8-hover.jpg'); }

#team-9 .tile-bg { background-image: url('../_img/about-team-member-9.jpg'); }
#team-9 .tile-bg::after { background-image: url('../_img/about-team-member-9-hover.jpg'); }

#team-10 .tile-bg { background-image: url('../_img/about-team-member-10.jpg'); }
#team-10 .tile-bg::after { background-image: url('../_img/about-team-member-10-hover.jpg'); }

/* Newsletter / Case Study Section */
/* Case Study section: image pinned to the viewport right edge */
.newsletter-section, .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, .newsletter-section .container {
    position: relative;
}
.case-study-row, .newsletter-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, .newsletter-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, .newsletter-section .case-image { position: static; width: 100%; height: auto; margin-bottom: 12px; }
    .case-study-row .case-content, .newsletter-row .case-content { margin-right: 0; }
}
.capabilities-row {
    display: grid;
    grid-template-columns: 33% 67%; /* image column = 50% of the row */
    gap: 2px;
    align-items: center;
}
@media (max-width: 900px) {
    .capabilities-row { grid-template-columns: 1fr; }
    .cap-image img { margin-bottom: 12px; }
}
.btn-see {
    margin-top: 16px;
    padding: 10px 14px;
    border: 2px solid #FF6902;
    color: #FF6902;
    background: transparent;
    text-decoration: none;
    border-radius: 0;
    font-weight: 700;
}
.btn-see:hover,
.btn-see:focus {
    background: rgba(255,105,2,0.12);
    outline: none;
}
.btn-see-icon { stroke: #FF6902; fill: #FF6902; }
.cap-image { width: 100%; }
.cap-image img { width: 100%; height: auto; display: block; object-fit: cover; }
@media screen and (max-width: 900px) {
    .cap-image img {
        padding-top: 20px;
    }
}
.trusted-heading {
    font-family: proxima-nova, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800; /* Regular */
    font-size: 1.5rem;
    color: #FF6902;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}
.cap-content .trusted-heading-wrapper {
    justify-content: left;
    display: flex;
    position: absolute;
    top: 0;
}
.newsletter-heading {
    font-family: 'Gotham HTF Bold Condensed', sans-serif;
    color: var(--mchale-grey); /* same style as How We Do It but gray */
    margin-top: 8px;
    font-size:75px;
    line-height:1;
    text-align:left;
    padding-bottom: 20px;
}
.minority-owned__heading {
    font-family: 'Gotham HTF Bold', sans-serif;
    font-size: 22px;
    color: #FF6902;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
}
.minority-owned__logos {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}
.cap-paragraph {
    font-family: 'Myriad Pro Regular', sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 16px;
    color: var(--mchale-grey);
    padding: 0;
}
/* 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;
  /* keep the 28%:18%:18%:18%:18% ratio using fr units */
  grid-template-columns: 1.555fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
  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 .how-col-1 {
    align-items: center;
    text-align: center;
}
.how-we-do h2, .how-we-do h3 {
    color: #ffffff;
    margin: 0;
}
.how-we-do h2 {
    font-size: 75px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.how-we-do h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    line-height: 1;
}
.how-we-do p {
    margin: 0;
    color: rgba(255,255,255,0.95);
    line-height: 1;
    padding: 0;
    padding: 0 20px 0 0;    
}
.how-we-do .icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
@media screen and (max-width: 900px) {
    .how-col-1 {
        grid-column: span 2; /* make first column span two columns on tablet */
    }
}
/* 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);
}
@media (max-width: 900px) {
    .how-we-do .how-grid {
        grid-template-columns: 1fr 1fr; /* two columns on tablet/mobile */
    }
    .how-we-do .how-col {
        align-items: start;
        text-align: left;
    }
}