/*
  Michael Xuereb Portfolio
  Custom styles extending templatemo-first-portfolio-style.css
  Colors kept from original template:
    --primary-color: #535da1
    --secondary-color: #14B789
*/

/* ----------------------------------------
   NAVBAR OVERRIDES
---------------------------------------- */
.navbar-brand {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--dark-color) !important;
}

/* Remove animation delay on nav scroll — keep easing only */
.navbar {
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

html {
  scroll-behavior: smooth;
}

/* ----------------------------------------
   HERO / SPLASH SECTION
---------------------------------------- */

.odibee-sans-regular {
  font-family: "Odibee Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fugaz-one-regular {
  font-family: "Fugaz One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero {
  background: var(--primary-color);
  padding-top: 160px;
  padding-bottom: 160px;
  position: relative;
  overflow: hidden;
}

.hero-deco-13 {
  width: 820px;
  top: -140px;
  right: 350px;
  rotate: 0deg;
  z-index: 0;
}

.hero-deco-1 {
  width: 360px;
  top: 20px;
  right: 1620px;
  rotate: 60deg;
}

.hero-deco-2 {
  width: 300px;
  top: -40px;
  right: -60px;
  rotate: -20deg;
}

.hero-deco-3 {
  width: 300px;
  top: 240px;
  right: -60px;
  rotate: -20deg;
}

.hero-deco-4 {
  width: 250px;
  top: 40px;
  right: 780px;
  rotate: 20deg;
}

.hero-deco-5 {
  width: 200px;
  top: 220px;
  right: 790px;
  rotate: -20deg;
}

.hero-deco-6 {
  width: 360px;
  top: -90px;
  right: 80px;
  rotate: 30deg;
}

.hero-deco-7 {
  width: 360px;
  top: 270px;
  right: 1570px;
  rotate: 10deg;
}

.hero-deco-8 {
  width: 140px;
  top: 190px;
  right: 1780px;
  rotate: 10deg;
}

.hero-deco-9 {
  width: 230px;
  top: -60px;
  right: 1150px;
  rotate: 10deg;
}

.hero-deco-10 {
  width: 220px;
  top: 230px;
  right: 1600px;
  rotate: -40deg;
}

.hero-deco-11 {
  width: 210px;
  top: 60px;
  right: 420px;
  rotate: -10deg;
}

.hero-deco-12 {
  width: 80px;
  top: 70px;
  right: 1350px;
  rotate: -20deg;
}

.hero-deco-14 {
  width: 140px;
  top: 80px;
  right: 1490px;
  rotate: -50deg;
}

.hero-deco-15 {
  width: 290px;
  top: -45px;
  right: 890px;
  rotate: 40deg;
}

.hero-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;    
}


.hero-title {
  font-family: "Odibee Sans", sans-serif;
  color: var(--brighter-title-color);
  font-size: 8rem;
  line-height: .5;
  margin-left: 120px;
  letter-spacing: .07em;
  position: relative;
  left: -70px;
  text-shadow: 7px 7px 0px #323b74;
  z-index: 4;
}

.hero-title-lastname {
  font-family: "Odibee Sans", sans-serif;
  color: var(--brighter-title-color);
  font-size: 8rem;
  line-height: .9;
  margin-left: 120px;
  letter-spacing: .07em;
  position: relative;
  right: 0px;
  text-shadow: 7px 7px 0px #323b74;
  z-index: 4;
}


.hero-subtitle {
  color: var(--brighter-title-color);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  text-shadow: 2px 2px 0px #323b74;
}

.hero-roles {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-text {
  z-index: 4;
}

.hero-name-ellipse {
  z-index: 1;
  rotate: -10deg;
  position: absolute;
  display: block;
  top: -20px;
  width: 700px
}

.hero .hero-name-ellipse {
  left: -20px;
}

.hero-face {
  width: 650px;
  max-width: none; 
  z-index: 2;
  position: relative;
  left: -100px;
  top: 190px;
}

.hero-onset-img {
  width: 400px;
  max-width: none; 
  border-radius: var(--border-radius-medium);
  object-fit: cover;
  box-shadow: 20px -15px 30px rgba(0,0,0,0.3);
  z-index: 1;
  position: relative;
  right: 0px;
  top: 130px;
  rotate: 13deg
}


/* ----------------------------------------
   REELS SECTION
---------------------------------------- */
.reels-section {
  padding-top: 70px;
  padding-bottom: 60px;
}

.reel-embed-wrap {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  background: #000;
  aspect-ratio: 16/9;
  box-shadow: 10px 10px 0px #aeb0b9;
}

.reel-embed-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.reel-label {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color);
  margin-top: 20px;
  text-align: center;
}

.reels-cta-btn {
  font-family: "Fugaz One", sans-serif;
  background: linear-gradient(#16ce9a 40px, #276654);
  color: #252c55 !important;
  border: none;
  border-radius: var(--border-radius-large);
  font-weight: 700;
  padding: 14px 40px;
  font-size: 2.2rem;
  transition: background 0.6s ease, transform 0.2s ease;
  display: inline-block;

}

.reels-cta-btn:hover {
  background: linear-gradient(#535da1 40px, #252c55);
  transform: scale(1.10) translateY(0px);
  color: var(--white-color) !important;
}

/* ----------------------------------------
   ABOUT SECTION
---------------------------------------- */
.about-section {
  background: var(--section-bg-color);
  padding-top: 150px;
  padding-bottom: 150px;
}

.about-onset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Gallery links are transparent to layout — display:contents means
   the <a> tag is invisible to the grid and the img inside participates
   directly as a grid item, preserving the original visual exactly */
.about-gallery-link {
  display: contents;
}

.about-onset-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius-small);
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.about-onset-grid img:hover {
  transform: scale(1.05);
}

/* First link wraps the first image — span 2 columns */
.about-gallery-link:first-child img {
  grid-column: span 2;
  height: 260px;
}

.about-onset-grid .about-setphoto-plan-c {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 0% 35%;
}

.about-onset-grid .about-setphoto-a-table-for-keaton-face {
  width: 100%;
  object-fit: cover;
  object-position: 0% 25%;
}


/* ----------------------------------------
   CERTIFICATIONS SECTION
---------------------------------------- */
.certs-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cert-badge-link {
  display: inline-block;
  perspective: 600px;
}

.cert-badge-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center center;
  border-radius: 12px;
}

.cert-badge-link:hover .cert-badge-img {
  transform: scale(1.18) rotate(8deg);
  box-shadow: 0 12px 36px rgba(83,93,161,0.35);
}

.credly-verified-link {
  display: inline-block;
}

.credly-verified-img {
  height: 44px;
  object-fit: contain;
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: grayscale(20%);
}

.credly-verified-img:hover {
  opacity: 0.8;
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* ----------------------------------------
   SOFTWARE SECTION
---------------------------------------- */
.software-section {
  background: var(--section-bg-color);
  padding-top: 100px;
  padding-bottom: 100px;
}

.software-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

.software-item:hover {
  transform: translateY(-6px);
}

.software-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.software-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--p-color);
  text-align: center;
  letter-spacing: 0.5px;
}

/* ----------------------------------------
   CONTACT CTA (bottom of home)
---------------------------------------- */
.contact-cta-section {
  position: relative;
  overflow: hidden; 
  background: var(--primary-color);
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.contact-cta-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.contact-cta-deco-1 {
  width: 300px;
  top: 40px;
  right: 380px;
  rotate: 30deg;
}

.contact-cta-deco-2 {
  width: 500px;
  top: -5px;
  right: 1280px;
  rotate: -20deg;
}

.contact-cta-section h2 {
  color: var(--white-color) !important;
}

.contact-cta-section p {
  color: rgba(255,255,255,0.75);
}

/* ----------------------------------------
   SECTION TITLE BADGE (shared)
---------------------------------------- */
.section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--secondary-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  margin-bottom: 16px;
}

/* ----------------------------------------
   PORTFOLIO PAGE — FILTER BUTTONS
---------------------------------------- */

.portfolio-hero-title {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 3px
}

.portfolio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}

.filter-btn {
  background: var(--white-color);
  border: 4px solid var(--border-color);
  border-radius: var(--border-radius-large);
  color: var(--p-color);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

/* ----------------------------------------
   PORTFOLIO PAGE — PROJECT CARDS
---------------------------------------- */
.project-card {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  display: block;
  color: inherit;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(83,93,161,0.18);
  color: inherit;
  text-decoration: none;
}

.project-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.project-card-body {
  padding: 16px 20px;
}

.project-card-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--secondary-color);
  margin-bottom: 4px;
}

.project-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0;
}

/* hidden category items */
.project-card-wrap {
  transition: opacity 0.3s ease;
}

.project-card-wrap.hidden {
  display: none;
}

/* ----------------------------------------
   PORTFOLIO PAGE — REELS ROW
---------------------------------------- */
.portfolio-reels-section {
  background: var(--section-bg-color);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ----------------------------------------
   PROJECT DETAIL PAGE
---------------------------------------- */
.project-detail-hero {
  background: var(--primary-color);
  padding-top: 140px;
  padding-bottom: 40px;
}

.project-detail-hero h1 {
  color: var(--white-color);
}

.project-detail-hero .project-meta span {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border-radius: var(--border-radius-large);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 14px;
  margin-right: 6px;
  margin-bottom: 6px;
}

.project-embed-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.project-embed-wrap {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
  background: #000;
}

.project-embed-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.project-info-section {
  padding-bottom: 100px;
}

.project-info-card {
  background: var(--section-bg-color);
  border-radius: var(--border-radius-medium);
  padding: 32px;
}

.project-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-bottom: 6px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--border-radius-large);
  color: var(--white-color) !important;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 20px;
  margin-bottom: 28px;
  transition: background 0.3s ease;
  text-decoration: none;
}

.back-btn:hover {
  background: rgba(255,255,255,0.25);
}

/* ----------------------------------------
   CONTACT PAGE
---------------------------------------- */
.contact-page-hero {
  background: var(--primary-color);
  padding-top: 160px;
  padding-bottom: 40px;
  text-align: center;
}

.contact-page-hero h1 {
  color: var(--white-color);
}

.contact-page-hero p {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
}

.contact-social-section {
  padding-bottom: 20px;
}


.contact-social-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.contact-social-icon-wrap:hover {
  transform: translateY(-6px);
}

.contact-social-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--white-color);
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.contact-social-icon-wrap:hover .contact-social-img {
  box-shadow: 0 8px 32px rgba(83,93,161,0.28);
}

.contact-social-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--p-color);
  text-align: center;
}

.contact-message-section {
  background: var(--section-bg-color);
  padding-top: 80px;
  padding-bottom: 100px;
}

.contact-email-display {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 2px solid var(--secondary-color);
  padding-bottom: 4px;
  transition: color 0.3s ease;
}



.contact-email-display:hover {
  color: var(--secondary-color);
}

/* ----------------------------------------
   FOOTER
---------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 80px;
  padding-bottom: 40px;
  text-align: center;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-social-icon:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

.footer-social-link {
  display: inline-block;
  margin: 0 6px;
}

/* ----------------------------------------
   SHARED UTILITY
---------------------------------------- */
.divider-wave svg {
  display: block;
  width: 100%;
}

.text-secondary-color {
  color: var(--secondary-color);
}

.text-primary-color {
  color: var(--primary-color);
}

/* Smooth scroll — no delay override */
html {
  scroll-behavior: smooth;
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */
/* about-onset-grid image sizes on tablet/mobile */
@media (max-width: 991px) {
  .about-onset-grid img:first-child {
    height: 200px;
  }

  .about-onset-grid img {
    height: 160px;
  }
}

@media (max-width: 767px) {
  .reel-embed-wrap {
    margin-bottom: 24px;
  }

  .portfolio-filter-bar {
    gap: 8px;
  }

  .filter-btn {
    font-size: 0.78rem;
    padding: 7px 14px;
  }
}

/* ----------------------------------------
   NAVBAR SCROLLED STATE
---------------------------------------- */
.navbar {
  background: transparent;
  padding-top: 16px;
  padding-bottom: 16px;
}

.navbar-scrolled {
  background: var(--white-color) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.08);
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar .nav-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white-color) !important;
  letter-spacing: 0.5px;
  transition: color 0.25s ease;
}

.navbar-scrolled .nav-link {
  color: var(--p-color) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--secondary-color) !important;
}

.navbar-scrolled .navbar-brand {
  color: var(--dark-color) !important;
}

.navbar .navbar-brand {
  color: var(--white-color) !important;
}

/* Portfolio & contact page — navbar always dark since no hero bg */
body.page-light .navbar {
  background: var(--white-color);
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}

body.page-light .navbar .nav-link {
  color: var(--p-color) !important;
}

body.page-light .navbar .navbar-brand {
  color: var(--dark-color) !important;
}

/* ----------------------------------------
   NAVBAR SEPARATORS
---------------------------------------- */
.nav-separator {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  pointer-events: none;
  user-select: none;
}

.nav-separator::before {
  content: '';
  display: block;
  width: 1.5px;
  height: 16px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
}

.navbar-scrolled .nav-separator::before,
body.page-light .navbar .nav-separator::before {
  background: rgba(0,0,0,0.2);
}

/* ----------------------------------------
   NAVBAR BRAND — always visible fix
---------------------------------------- */
.navbar .navbar-brand {
  color: var(--white-color) !important;
  transition: color 0.35s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.navbar-scrolled .navbar-brand {
  color: var(--dark-color) !important;
}

body.page-light .navbar .navbar-brand {
  color: var(--dark-color) !important;
}

/* ----------------------------------------
   PROJECT STILLS GALLERY
---------------------------------------- */

#projects {
  scroll-margin-top: 50px;
}

.project-stills-section {
  padding-top: 0;
  padding-bottom: 80px;
}

.project-stills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.project-stills-grid .still-item {
  overflow: hidden;
  border-radius: var(--border-radius-small);
  cursor: zoom-in;
  display: block;
}

.project-stills-grid .still-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-stills-grid .still-item:hover img {
  transform: scale(1.04);
}

/* Varied sizing */
.project-stills-grid .still-wide {
  grid-column: span 2;
}

.project-stills-grid .still-tall {
  grid-row: span 2;
}

.project-stills-grid .still-item {
  height: 220px;
}

.project-stills-grid .still-tall {
  height: 450px;
}

/* ----------------------------------------
   PORTFOLIO FILTER — All button gap
---------------------------------------- */
.filter-btn-gap {
  width: 16px;
  display: inline-block;
  flex-shrink: 0;
  border-left: 1.5px solid rgba(128, 128, 128, 0.9);
  height: 32px;
  align-self: center;
  margin: 0 8px;
}

/* ----------------------------------------
   PROJECT TYPE BADGE (under title)
---------------------------------------- */
.project-type-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--border-radius-large);
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 16px;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* ========================================
   RESPONSIVE — MOBILE & TABLET FIXES
   Breakpoints:
     Desktop large : > 1400px (1920x1080 baseline)
     Desktop normal: 1200px - 1400px
     Laptop        : 992px  - 1200px
     Tablet        : 768px  - 992px
     Mobile        : < 768px
======================================== */

/* ----------------------------------------
   NAVBAR — HAMBURGER MODE FIX (< 1025px)
   Covers hamburger mode (Bootstrap collapses
   at 992px) plus the 992-1024px tablet zone.
   Always white navbar bar with dark text.
---------------------------------------- */
@media (max-width: 1024px) {

  /* The navbar bar itself — always white, always visible */
  .navbar {
    background: var(--white-color) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  }

  /* Brand name — always dark */
  .navbar .navbar-brand {
    color: var(--dark-color) !important;
  }

  /* Toggler icon — dark bars on white background */
  .navbar-toggler {
    border-color: rgba(0,0,0,0.2) !important;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  /* Collapsed dropdown — white background */
  .navbar .navbar-collapse {
    background: var(--white-color);
    border-top: 1px solid var(--border-color);
    padding: 8px 0;
    margin-top: 4px;
  }

  /* Nav links — dark text */
  .navbar .navbar-collapse .nav-link {
    color: var(--p-color) !important;
    padding: 10px 4px;
  }

  /* Active and hover — teal */
  .navbar .navbar-collapse .nav-link:hover,
  .navbar .navbar-collapse .nav-link.active {
    color: var(--secondary-color) !important;
  }

  /* Separator lines hidden on mobile — no room */
  .nav-separator {
    display: none;
  }
}

/* ----------------------------------------
   HERO DECO — RESPONSIVE
   Strategy:
     Desktop (>1400px) : full layout as-is
     Laptop (992-1400)  : scale down widths, keep all visible
     Tablet (768-992)   : show only right-side decos, hide left cluster
     Mobile (<768)      : hide all decos entirely
---------------------------------------- */


@media (min-width: 2561px) {
  .hero-deco { display: none; }
}

@media (max-width: 2560px) and (min-width: 1921px) {
  .hero-deco { transform: translate(-300px, 50px); scale: 140%; }
  .hero-deco-13 { display: none; }
  .hero-deco-14 { display: none; }
}


/* Laptop — scale everything down proportionally */
@media (max-width: 1440px) and (min-width: 1025px) {
  .hero-name-ellipse {width: 420px; transform: translateX(90px); }
  .hero-deco-13 { width: 780px; top: -200px; right: 230px; }
  .hero-deco-1  { width: 250px; top: 20px;  right: 1280px; }
  .hero-deco-2  { width: 190px; top: 50px; right: -40px; }
  .hero-deco-3  { width: 220px; top: 200px; right: -40px; }
  .hero-deco-4  { width: 230px; top: 40px;  right: 520px; }
  .hero-deco-5  { width: 200px; top: 190px; right: 590px; rotate: -33deg; }
  .hero-deco-6  { width: 230px; top: -30px; right: 60px; }
  .hero-deco-7  { width: 180px; top: 220px; right: 1250px; }
  .hero-deco-8  { width: 130px; top: 150px; right: 1290px; rotate: 20deg; }
  .hero-deco-9  { width: 240px; top: -40px; right: 810px; }
  .hero-deco-10 { width: 100px; top: 60px; right: 1190px; rotate: 10deg; }
  .hero-deco-11 { width: 180px; top: 80px;  right: 228px; rotate: -10deg; }
  .hero-deco-12 { width: 80px;  top: 20px;  right: 1040px; }
  .hero-deco-14 { width: 140px; top: 45px;  right: 1050px; rotate: 15deg; }
  .hero-deco-15 { width: 300px; top: -55px; right: 590px; }
}

/* ============================================================
   TABLET + MOBILE HERO — REDESIGNED LAYOUT
   Applies to all screens under 1024px.

   Layout: Two columns side by side, no wasted space.
     LEFT  (50%): ellipse behind name, name, career, film roles — stacked
     RIGHT (50%): onset photo behind, cutout photo in front — overlapping

   All vector deco images are hidden.
   The Bootstrap row/column structure is overridden via flexbox.
   The hero section height is tightly fitted to its content.
============================================================ */


@media (min-width: 991px) and (max-width: 1025px) {
  .hero .col-lg-3.col-md-5.col-12 {
    right: 30%;
  }
}







@media (max-width: 1024px) {

  /* ── Section container ── */
  .hero {
    padding-top: 70px;    /* enough room for the fixed navbar */
    padding-bottom: 0;
    overflow: hidden;
  }

  /* Hide every decorative vector */
  .hero-deco { display: none !important; }

  /* ── Bootstrap row: force two equal columns, no wrap, stretch height ── */
  .hero .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    --bs-gutter-y: 0;
    margin: 0;
  }

  /* ── LEFT column — text block ── */
  .hero .col-lg-6.col-12:first-child {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 16px 12px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 4;
    overflow: visible;
  }

  /* ── RIGHT column wrapper — stacks the two image columns ── */
  /* We repurpose the face-image col as the main right container
     and hide the third (onset) column entirely at the Bootstrap level,
     then re-show onset as an absolutely-placed layer inside the face col. */

  /* Face-image column: becomes the right half */
  .hero .col-lg-3.col-md-5.col-12 {
    flex: 0 0 60% !important;
    max-width: 80% !important;
    padding: 0;
    position: relative;
    overflow: visible;
    /* Minimum height so absolute children have a reference box */
    min-height: 580px;
    top: 140px;
  }

  /* Onset-image column: collapse to 0 width — onset is shown via absolute positioning */
  .hero .col-lg-3.col-md-7.col-12 {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    padding: 0;
    overflow: visible;
    position: static;
  }

  /* ── Ellipse ── */
  .hero-name-ellipse {
    position: absolute;
    width: 360px;
    top: -35px;
    left: -10px;
    rotate: -10deg;
    z-index: 1;
  }

  /* ── Name titles ── */
  .hero-title,
  .hero-title-lastname {
    font-size: clamp(4.8rem, 6vw, 5rem);
    line-height: 0.7;
    margin-left: 0;
    left: 0;
    right: 0;
    position: relative;
    z-index: 4;
  }

  .hero-title    { margin-top: 12px; }
  .hero-title-lastname { margin-bottom: 14px; }

  /* ── Career subtitle ── */
  .hero-subtitle {
    font-size: clamp(1.6rem, 2.5vw, 1.8rem);
    margin-bottom: 6px;
    position: relative;
    z-index: 4;
  }

  /* ── Film roles ── */
  .hero-roles {
    font-size: clamp(0.9rem, 1.6vw, 0.9rem);
    margin-bottom: 0;
    position: relative;
    z-index: 4;
  }

  /* ── Cutout (transparent) photo of Michael — foreground, right-center ── */
  .hero-face {
    /* Fill the right column vertically, anchor to bottom so feet don't show */
    position: absolute;
    bottom: 0;
    right: 3%;
    width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
    object-position: top center;
    z-index: 3;
    top: 0;
    left: auto;
    /* nudge the cutout so it overlaps slightly toward centre */
    transform: none;
  }

  /* ── Onset photo — behind the cutout, slightly rotated ── */
  .hero-onset-img {
    position: absolute;
    /* Place behind hero-face (z-index: 3) */
    z-index: 2;
    /* Rotated as in the example; you said you handled rotation already,
       but we preserve the existing 13deg from the base rule */
    rotate: 13deg;
    /* Scale and position: fills roughly 70% of the column height,
       offset up and to the right so it peeks out behind the cutout */
    width: 45%;
    height: auto;
    max-width: none;
    top: 35%;
    right: -8%;
    bottom: auto;
    left: auto;
    box-shadow: 12px -8px 24px rgba(0,0,0,0.3);
    object-fit: cover;
    transform: none;
  }
}


/* ── Extra adjustment for smaller phones (under 480px) ── */
@media (max-width: 480px) {
  .hero-name-ellipse { width: 280px; right: 100px; padding: 0;}

  .hero-title,
  .hero-title-lastname { font-size: clamp(3.8rem, 9vw, 3.9rem); padding: 0; }

  .hero-subtitle  { font-size: clamp(1.5rem, 3vw, 1.1rem); }
  .hero-roles     { font-size: clamp(1rem, 2vw, 1rem); letter-spacing: 0.5px;  }

  .hero-onset-img {
    width: 60%;
    top: 30%;
    right: -12%;
    padding: 0;
  }
}


/* ----------------------------------------
   CONTACT CTA DECO — RESPONSIVE
   Same strategy: scale on laptop,
   simplify on tablet, hide on mobile.
---------------------------------------- */


@media (min-width: 2560px) {
  .contact-cta-deco-1 { width: 290px; right: 650px; }
  .contact-cta-deco-2 { width: 480px; top: -10px; right: 1600px; }
}

@media (max-width: 2559px) and (min-width: 2300px) {
  .contact-cta-deco-1 { width: 290px; right: 600px; }
  .contact-cta-deco-2 { width: 480px; top: -10px; right: 1500px; }
}


@media (max-width: 2299px) and (min-width: 2100px) {
  .contact-cta-deco-1 { width: 290px; right: 500px; }
  .contact-cta-deco-2 { width: 480px; top: -10px; right: 1400px; }
}


@media (max-width: 1700px) and (min-width: 1441px) {
  .contact-cta-deco-1 { width: 290px; right: 200px; }
  .contact-cta-deco-2 { width: 480px; top: -10px; right: 1080px; }
}


@media (max-width: 1440px) and (min-width: 1025px) {
  .contact-cta-deco-1 { width: 290px; right: 100px; }
  .contact-cta-deco-2 { width: 480px; top: -10px; right: 880px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  /* Keep just one deco on tablet, positioned near edge */
  .contact-cta-deco-2 { width: 410px; right: 700px; top: 0px; }
  .contact-cta-deco-1 { width: 260px; right: 20px; top: 40px; }
}

@media (max-width: 767px) {
  .contact-cta-deco { display: none; }
}

/* ----------------------------------------
   HERO TITLE — RESPONSIVE FONT SIZES
---------------------------------------- */
@media (max-width: 1440px) and (min-width: 1025px) {
  .hero-title,
  .hero-title-lastname { font-size: 6rem; }
}
/* Font sizes for ≤1024px are handled inside the unified mobile/tablet block above */