/**
 * Bannatyne Digital — Homepage Styles
 */

/* ── Shared eyebrow style ────────────────────────────────── */
.eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-peach);
	margin: 0 0 var(--space-4);
}

.eyebrow--dark {
    color: #0d1fe8;
}
/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.home-hero {
	position: relative;
	background-color: var(--color-ultramarine);
	color: var(--color-white);
	padding: var(--space-24) 0 var(--space-32);
	overflow: hidden;
	min-height: 85vh;
	display: flex;
	align-items: center;
}

.home-hero__pattern {
	position: absolute;
	top: -5%;
	height: 120%;
	right: 0;
	bottom: 0;
	width: 55%;
	background-image: url("/wp-content/uploads/2026/06/bannatyne_pattern_hero_v2_971303d9.png");
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0;
	animation: patternFadeIn 0.6s ease forwards;
    animation-delay: 1s;
}

@keyframes patternFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.home-hero__inner {
	position: relative;
	z-index: 1;
}

.home-hero__title {
	font-size: clamp(4rem, 10vw, 10.5rem);
	font-weight: var(--fw-black);
	line-height: .9;
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	margin: 0 0 var(--space-6);
}

.home-hero__title em {
	font-style: italic;
}

.home-hero__tagline {
	font-size: 24px;
	letter-spacing: var(--tracking-wide);
	margin: 0 0 var(--space-2);
	opacity: 0.85;
}

.home-hero__subtitle {
	font-size: 24px;
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-8);
}

/* ═══════════════════════════════════════════════════════════
   INDUSTRIES WE SERVE
   ═══════════════════════════════════════════════════════════ */
/* .home-industries {
	padding: var(--space-24) 0;
	background-color: var(--color-white);
}

.home-industries__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--fw-black);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	margin: 0 0 var(--space-12);
}

.home-industries__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

.home-industries__image-placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	background: url("/wp-content/uploads/2026/06/image_placeholder_4x3_9c8b1a7e.png") center center / cover no-repeat;
	border-radius: var(--radius-sm);
}

.industry-item {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding: var(--space-5) 0;
}

.industry-item:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.industry-item__header {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	cursor: pointer;
}

.industry-item__dash {
	width: 24px;
	height: 2px;
	background-color: var(--color-ultramarine);
	flex-shrink: 0;
}

.industry-item__title {
	font-size: var(--text-base);
	font-weight: var(--fw-black);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin: 0;
	flex-grow: 1;
}

.industry-item__arrow {
	flex-shrink: 0;
	color: var(--color-ultramarine);
	transition: transform var(--duration-normal) var(--ease-out);
}

.industry-item:hover .industry-item__arrow {
	transform: translateX(4px);
}

.industry-item__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin: var(--space-3) 0 0 calc(24px + var(--space-4));
	max-width: 400px;
	display: none;
}

.industry-item--active .industry-item__desc {
	display: block;
}

.industry-item--active .industry-item__title {
	font-style: italic;
} */


/* ═══════════════════════════════════════════════════════════
   OUR WORK TEASER
   ═══════════════════════════════════════════════════════════ */
.home-work {
	position: relative;
	background-color: var(--color-ultramarine);
	color: var(--color-white);
	padding: var(--space-24) 0;
	overflow: hidden;
}

.home-work__image-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background: linear-gradient(135deg, #ff6b4a, #ff9f43, #ee5a24);
	opacity: 0.9;
}
.home-work__image img{ width: 100%; height: 100%; object-fit: cover; }

.home-work__inner {
	position: relative;
	z-index: 1;
}

.container.home-work__inner.d-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.home-work__title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: var(--fw-black);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	margin: 0 0 var(--space-6);
	font-style: italic;
}

.home-work__title em {
	font-style: italic;
}

.home-work__text {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--space-8);
	max-width: 500px;
	opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT BANNATYNE
   ═══════════════════════════════════════════════════════════ */
.home-about {
	padding: var(--space-24) 0;
	background-color: var(--color-white);
	position: relative;
	overflow: hidden;
}

.home-about__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}

.home-about__title {
	font-size: clamp(2.2rem, 4.5vw, 4.2rem);
	font-weight: var(--fw-black);
	line-height: .9;
	text-transform: uppercase;
	margin: 0 0 var(--space-6);
	font-style: italic;
}

.home-about__text {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-8);
	max-width: 560px;
}

.home-about__pattern {
	width: 100%;
	min-height: 250px;
	background-image: url("/wp-content/uploads/2026/06/Bannatyne_Symbol_Ultramarine_rgb_aa114d40.png");
	background-size: cover;
	background-position: center;
	opacity: 0.07;
	position: absolute;
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    max-width: 600px;
    opacity: 0.07;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   QUOTE
   ═══════════════════════════════════════════════════════════ */
.home-quote {
	padding: var(--space-24) 0;
}

.home-quote__text {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--fw-regular);
	font-style: italic;
	line-height: var(--leading-snug);
	text-align: center;
	color: #fff;
	margin: 0 auto;
	max-width: 800px;
	border: none;
	padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   STATS — DATA TELLS OUR STORY
   ═══════════════════════════════════════════════════════════ */
.home-stats {
	padding: var(--space-24) 0;
	background-color: var(--color-ultramarine);
	color: var(--color-white);
}

.home-stats__title {
	font-size: clamp(4rem, 9vw, 9rem);
    font-weight: var(--fw-black);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    margin: 0 0 var(--space-16);
    font-style: italic;
}

.home-stats__title-accent {
	color: var(--color-peach);
}

.home-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-10);
}

.home-stats__number {
	display: block;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: var(--fw-black);
	line-height: 1;
	margin-bottom: var(--space-2);
}

.home-stats__label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-regular);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

/* ═══════════════════════════════════════════════════════════
   OUR APPROACH
   ═══════════════════════════════════════════════════════════ */
.home-approach {
	padding: var(--space-24) 0;
	background-color: var(--color-white);
}

.home-approach__items {
	margin-top: var(--space-8);
}

.home-approach__item {
	padding: var(--space-10) 0;
}

.home-approach__item:first-child {
	padding-top: 0;
}

.home-approach__item-title {
	font-size: clamp(4rem, 10.5vw, 9.5rem);
	font-weight: var(--fw-black);
	line-height: 1;
	margin: 0 0 var(--space-4);
	color: var(--color-text);
	width: max-content;
}

.home-approach__item-title em {
	font-style: italic;
}

.home-approach__item-text {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 680px;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
 
@keyframes patternDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
 
.home-hero__title p {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
 
.home-hero__title::after {
  transform-origin: left center;
  transform: scaleX(0);
  animation: lineExpand 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
 
.home-hero__tagline {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
 
.home-hero__subtitle {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
 
.btn {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
 
.btn:hover .btn-arrow {
  transform: translateX(4px);
}
.home-approach__item-title em {
    position: relative;
    display: inline-block;
    font-style: italic;
}

.home-approach__item-title em::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-ultramarine);
    transition: width 0.8s ease;
}

.home-approach__item-title.is-active em::after {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1560px) {
	
}
@media (max-width: 1380px) {
	
}
@media (max-width: 1024px) {
	.container.home-work__inner.d-grid {
		grid-template-columns: 1fr;
	}
	.home-work__inner.d-grid .home-work__image{
		padding-top: 40px;
	}
}
@media (max-width: 768px) {
	.home-hero__title {
		font-size: 60px;
	}
	.home-hero__tagline,.home-hero__subtitle{
		font-size: 20px;
	}
	.home-industries ,.home-work , .home-about ,.home-stats , .home-approach{
		padding: var(--space-10) 0;
	}
	.home-approach__item {
    	padding: var(--space-6) 0;
	}
}
@media (min-width: 768px) {
	

	.home-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.home-about__inner {
		grid-template-columns: 1.2fr 1fr;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.home-hero {
		padding: var(--space-24) 0;
	}

	.home-hero__content {
		max-width: 65%;
	}

	.home-about__inner {
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--space-20);
	}

	.home-about__pattern {
		min-height: 400px;
	}
}