/* ========================================
   HERO SECTION
   ======================================== */

.hero-section { position: relative; width: 100%; min-height: 650px; display: flex; align-items: center; overflow: hidden; }
.hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; }
.hero-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%); pointer-events: none; z-index: 1; }
.hero-overlay { position: relative; width: 100%; padding: 120px 0; z-index: 2; }
.hero-content { max-width: 630px; display: flex; flex-direction: column; gap: 16px; }
.hero-heading { font: var(--heading-h1-bold); letter-spacing: var(--heading-h1-bold-letter-spacing); color: var(--text-on-colour-heading); margin: 0; max-width: 601px; }
.hero-subtext { font: var(--heading-h4-reg); letter-spacing: var(--heading-h4-reg-letter-spacing); color: var(--text-on-colour-heading); margin: 0; max-width: 630px; }
.hero-cta { display: inline-flex; align-items: center; gap: 22px; background: var(--surface-default-default); color: var(--text-on-colour-heading); font-family: var(--font-family-base); font-size: 16px; font-weight: 600; letter-spacing: 0.50px; text-decoration: none; padding: 14px 24px; border-radius: var(--border-radius-sm); transition: background 0.2s ease; width: fit-content; margin-top: 16px; min-height: 50px; }
.hero-cta:hover { background: var(--surface-default-hover); }
.hero-cta-icon { width: 8px; height: 13px; }

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .hero-section { min-height: 500px; }
    .hero-overlay { padding: 80px 0; }
    .hero-content { max-width: 600px; }
    .hero-heading { font-size: 38px; line-height: 48px; }
    .hero-subtext { font-size: 22px; line-height: 30px; }
}

@media (max-width: 767px) {
    .hero-section { min-height: 450px; }
    .hero-overlay { padding: 60px 0; }
    .hero-content { max-width: 100%; }
    .hero-heading { font-size: 32px; line-height: 40px; }
    .hero-subtext { font-size: 18px; line-height: 26px; }
    .hero-cta { font-size: 14px; padding: 10px 24px; gap: 16px; }
    .hero-cta-icon { width: 6px; height: 10px; }
}

@media (max-width: 480px) {
    .hero-section { min-height: 550px; }
    .hero-bg-image { object-position: 70% center; }
    .hero-section::before { background: linear-gradient(270deg, rgba(49, 49, 49, 0.00) 2.5%, rgba(0, 0, 0, 0.87) 109.01%), rgba(0, 0, 0, 0.35); }
    .hero-overlay { padding: 0; min-height: 550px; display: flex; align-items: center; }
    .hero-content { gap: 16px; }
    .hero-heading { font-size: 28px; line-height: 34px; letter-spacing: -0.5px; }
    .hero-subtext { font-size: 20px; line-height: 27px; letter-spacing: -0.5px; font-weight: 400; }
    .hero-cta { font-size: 16px; padding: 14px 24px; gap: 22px; margin-top: 16px; }
    .hero-cta-icon { width: 8px; height: 13px; }

    /* Homepage-specific mobile tightening */
    body.home-page .hero-section { min-height: 500px; }
    body.home-page .hero-overlay { min-height: 500px; }
    body.home-page .hero-content { max-width: 340px; gap: 12px; }
    body.home-page .hero-heading { font-size: 26px; line-height: 32px; letter-spacing: -0.3px; max-width: 340px; }
    body.home-page .hero-subtext { font-size: 18px; line-height: 24px; letter-spacing: -0.2px; max-width: 340px; }
    body.home-page .hero-cta { font-size: 15px; padding: 12px 20px; gap: 18px; margin-top: 10px; }
    body.home-page .hero-cta-icon { width: 7px; height: 11px; }
}

/* ========================================
   HERO SECTION (SPLIT)
   ======================================== */

.hero-section-split { position: relative; width: 100%; min-height: 751px; background: var(--surface-secondary-default); display: flex; align-items: center; overflow: hidden; }
.hero-section-split.projects-hero { min-height: 670px; }
.hero-section-split.bespoke-hero { background: var(--surface-page-dark); }
.hero-section-split::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-image: url('../images/icons/decorative-curves.svg'); background-repeat: no-repeat; background-position: bottom right; background-size: auto 100%; opacity: 0.4; pointer-events: none; z-index: 1; }
.hero-section-split--red::before { background-image: url('../images/icons/decorative-curves-white.svg'); }
.hero-split-container { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; display: flex; align-items: center; z-index: 2; }
.hero-split-content { flex: 1; padding: 88px 24px 88px 127px; display: flex; flex-direction: column; gap: 32px; max-width: 833px; }
.hero-breadcrumb { font: var(--paragraph-body); letter-spacing: var(--paragraph-body-letter-spacing); color: var(--text-on-colour-heading); margin: 0; }
.hero-split-text { display: flex; flex-direction: column; gap: 16px; }
.hero-split-description { font: var(--paragraph-p2); letter-spacing: var(--paragraph-p2-letter-spacing); color: var(--text-on-colour-heading); margin: 0; max-width: 701px; }
.hero-split-image { flex-shrink: 0; width: 848px; height: 555px; margin: 88px 0; }
.hero-split-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.construction-hero .container { position: relative; z-index: 2; }
.construction-hero .section { margin: 0; column-gap: 76px; }
.construction-hero .section > div { padding: 0; }
.construction-hero .hero-split-content { max-width: none; padding: 88px 0; width: 50%; }
.construction-hero .hero-split-image { width: 50%; max-width: none; height: auto; margin: 88px 0 88px auto; }
.construction-hero .section { padding: 88px 0; }
.construction-hero .hero-split-image img { width: 100%; height: auto; aspect-ratio: 848 / 555; object-fit: cover; }

.what-we-can-make-hero .container { position: relative; z-index: 2; }
.what-we-can-make-hero .section { margin: 0; column-gap: 76px; }
.what-we-can-make-hero .section > div { padding: 0; }
.what-we-can-make-hero .hero-split-content { max-width: none; padding: 88px 0; width: 50%; }
.what-we-can-make-hero .hero-split-image { width: 50%; max-width: none; height: auto; margin: 88px 0 88px auto; }
.what-we-can-make-hero .section { padding: 88px 0; }
.what-we-can-make-hero .hero-split-image img { width: 100%; height: auto; aspect-ratio: 848 / 555; object-fit: cover; }
.what-we-can-make-hero .hero-split-image > div { width: 100%; height: auto; aspect-ratio: 848 / 555; }
.what-we-can-make-hero .btn .btn-icon { filter: var(--filter-to-red); }

@media (max-width: 1400px) {
    .hero-split-content { padding: 60px 40px; }
    .hero-split-image { width: 600px; height: 400px; margin: 60px 0; }
}

@media (max-width: 1200px) {
    .hero-section-split { min-height: auto; }
    .hero-split-container { flex-direction: column; }
    .hero-split-content { max-width: 100%; padding: 60px 40px; }
    .hero-split-image { width: 100%; height: auto; max-height: 500px; margin: 0; }
    .construction-hero .section { row-gap: 32px; column-gap: 0; }
    .construction-hero .hero-split-content { padding: 60px 0 0; }
    .construction-hero .hero-split-content { width: 100%; }
    .construction-hero .hero-split-image { width: 100%; height: auto; max-height: none; margin: 0; padding: 0 40px 60px; box-sizing: border-box; }
    .what-we-can-make-hero .section { row-gap: 32px; column-gap: 0; }
    .what-we-can-make-hero .hero-split-content { padding: 60px 0 0; width: 100%; }
    .what-we-can-make-hero .hero-split-image { width: 100%; height: auto; max-height: none; margin: 0; padding: 0 40px 60px; box-sizing: border-box; }
}

@media (max-width: 767px) {
    .hero-split-content { padding: 40px 24px; gap: 24px; }
    .hero-heading { font-size: 32px; line-height: 40px; }
    .hero-split-description { font-size: 16px; line-height: 28px; }
    .hero-split-image { max-height: 350px; }
    .construction-hero .hero-split-content { padding: 40px 0 0; }
    .construction-hero .hero-split-image { max-height: none; padding: 0 24px 40px; }
    .construction-hero .section { padding: 56px 0; }
    .what-we-can-make-hero .hero-split-content { padding: 40px 0 0; }
    .what-we-can-make-hero .hero-split-image { max-height: none; padding: 0 24px 40px; }
    .what-we-can-make-hero .section { padding: 56px 0; }
}

@media (max-width: 480px) {
    .hero-split-content { padding: 30px 20px; gap: 20px; }
    .hero-heading { font-size: 28px; line-height: 36px; }
    .hero-breadcrumb { font-size: 14px; }
    .hero-split-description { font-size: 15px; line-height: 24px; }
    .hero-cta { font-size: 14px; padding: 12px 20px; }
    .hero-split-image { max-height: 280px; }
    .construction-hero .hero-split-content { padding: 30px 0 0; }
    .construction-hero .hero-split-image { max-height: none; padding: 0 20px 32px; }
    .construction-hero .section { padding: 48px 0; }
    .what-we-can-make-hero .hero-split-content { padding: 30px 0 0; }
    .what-we-can-make-hero .hero-split-image { max-height: none; padding: 0 20px 32px; }
    .what-we-can-make-hero .section { padding: 48px 0; }
}

/* ========================================
   HERO SECTION (SPLIT) - RED VARIANT
   ======================================== */

.hero-section-split--red { background: var(--surface-default-default); }

/* ========================================
   HERO CTA - WHITE VARIANT
   ======================================== */

.hero-cta--white { background: var(--surface-page-default); color: var(--surface-default-default); }
.hero-cta--white:hover { background: var(--dark-grey-100); }