@charset "UTF-8";
@import url('../../../../assets/css/fonts.css');

/* ===================================================================
   FPT Japan Recruit Landing Page – Main Stylesheet
   =================================================================== */

/* ─── Reset / Base ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background: #ffffff;
  font-weight: 500;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans", sans-serif !important;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.w_100 {
  width: 100%;
}

/* ─── Colors ─── */
.text-orange { color: #EE7203; }
.text-gray   { color: #333333; }
.text-white  { color: #ffffff; }
.bg-orange   { background-color: #EE7203; }
.bg-light    { background-color: #F7F7F7; }
.bg-white    { background-color: #ffffff; }

/* ===================================================================
   HEADER
   =================================================================== */
.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 70px;
  margin: auto;
  margin-top: 10px;
}

.lp-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background: #ffffffe8;
  width: fit-content;
  transition: box-shadow 0.3s;
  border-radius: 42px;
  box-shadow: -6px 4px 14.4px 0px #9C9C9C40;
  max-width: 100%;
  margin: auto;
  padding: 0 15px;
  gap: 40px;
  border: 1px solid #FFFFFF
}

.lp-header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lp-header-logo img {
  height: 60px;
  width: auto;
}

.lp-header-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lp-nav-link {
  display: inline-block;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 600;
  color: #414141;
  position: relative;
  transition: color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.lp-nav-link:hover,
.lp-nav-link.active {
  color: #EE7203 !important;
  font-weight: 900;
  text-decoration: none;
}

.lp-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: linear-gradient(90deg, #F57122 0%, #FFCC6F 100%);
  border-radius: 2px;
}

.lp-header-cta {
  flex-shrink: 0;
}

.btn-entry {
  display: inline-block;
  padding: 6px 20px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.2s;
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, #F57122 0%, #EE421C 100%) padding-box,
    linear-gradient(90deg, #FFCC6F 0%, #FFFFFF 100%) border-box;
}

.border-radius-10 {
  border-radius: 10px;
}

.btn-entry:hover {
  color: #fff;
  opacity: 0.8;
  transition: background 0.2s;
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, #F57122 0%, #EE421C 100%) padding-box,
    linear-gradient(90deg, #FFCC6F 0%, #FFFFFF 100%) border-box;
}

/* Mobile menu toggle */
.lp-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.lp-menu-toggle span,
.lp-menu-toggle span::before,
.lp-menu-toggle span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  position: relative;
  transition: all 0.3s;
}

.lp-menu-toggle span::before,
.lp-menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}

.lp-menu-toggle span::before { top: -7px; }
.lp-menu-toggle span::after  { top: 7px; }

.lp-menu-toggle.open span { background: transparent; }
.lp-menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
.lp-menu-toggle.open span::after  { top: 0; transform: rotate(-45deg); }

/* ===================================================================
   HERO BANNER SLIDER
   =================================================================== */
.lp-banner {
  /* margin-top: 70px; */
  position: relative;
  overflow: hidden;
}

.lp-banner-slider .item {
  position: relative;
}

.lp-banner-slider .item .banner-image {
  width: 100%;
  display: block;
}

.lp-banner-slider .item .banner-image-mobile {
  display: none;
}

.lp-banner-overlay {
  position: absolute;
  top: 0;
  left: 4%;
  right: 0;
  bottom: -53%;
  display: flex;
  align-items: center;
  padding-left: 8%;
}

.lp-banner-content {
  max-width: 500px;
}

.lp-banner-content .banner-title {
  font-size: 50px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-style: italic;
}

.lp-banner-content .banner-sub-title {
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
}

/* Thumbnail navigation */
.lp-banner-thumbs {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.lp-thumb-item {
  width: 80px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s;
  opacity: 0.7;
}

.lp-thumb-item.active,
.lp-thumb-item:hover {
  border-color: #EE7203;
  opacity: 1;
}

.lp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Owl overrides */
.lp-banner-slider .owl-dots,
.lp-banner-slider .owl-nav {
  display: none;
}

/* ===================================================================
   SECTION COMMON STYLES
   =================================================================== */
.lp-section {
  padding: 80px 0;
}

.lp-section-title {
  text-align: center;
  margin-bottom: 60px;
}

.lp-section-title h2 {
  font-size: 50px;
  font-weight: 800;
  color: #414141;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  font-family: 'Inter', sans-serif;
}

.lp-section-title h2::after,
.lp-office-card-name.title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #F57122 0%, #FFCC6F 100%);
  border-radius: 2px;
}

.lp-office-card-name.title::after {
  bottom: -30%;
}

.d-flex-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.d-flex-row {
  flex-direction: row;
}

.d-flex {
  display: flex;
  gap: 20px;
}

.align-items-center {
  align-items: center;
}

.bg-gray {
  background: #E7E2E2;
}

.m-auto {
  margin: auto;
}

.text-gray {
  color: #ADADAD;
}

.mb-10 {
  margin-bottom: 10px;
}

/* ===================================================================
   会社を知る (ABOUT COMPANY)
   =================================================================== */
.lp-about {
  background: #F8F5F5;
}

.lp-about-block {
  margin-bottom: 60px;
}

.lp-about-block:last-child {
  margin-bottom: 0;
}

.lp-about-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.lp-about-row.reverse {
  flex-direction: row-reverse;
}

.lp-about-text {
  flex: 1;
}

.lp-about-text div:first-child {
  width: 70%;
  background: #E7E2E2;
  padding: 3%;
}

.lp-about .lp-about-row {
  background: #E7E2E2;
  padding: 3%;
}

.lp-about-image {
  position: relative;
  width: 30%;
}

.lp-about-image-info {
  position: absolute;
  bottom: 3%;
  text-align: right;
  color: white;
  right: 6%;
  font-size: 22px;
}

.lp-about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.lp-about-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  /* margin-bottom: 20px; */
  padding: unset !important;
}

.lp-about-block-title .icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.lp-about-block-title h3 {
  font-size: 36px;
  font-weight: 800;
  color: #414141;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.lp-about-text .desc {
  font-size: 18px;
  color: #555;
  line-height: 1.5;
}

.lp-about .lp-about-row .d-flex .lp-about-block-title {
  margin: auto;
}

/* Company overview card style */
.lp-about-info-card {
  background: #F7F7F7;
  border-radius: 12px;
  padding: 30px;
  margin-top: 20px;
}

.lp-about-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #E5E5E5;
}

.lp-about-info-row:last-child {
  border-bottom: none;
}

.lp-about-info-row .info-label {
  font-weight: 700;
  color: #333;
  min-width: 80px;
  font-size: 14px;
}

.lp-about-info-row .info-value {
  font-size: 14px;
  color: #555;
  flex: 1;
}

.company-info p {
  display: flex;
  align-items: flex-start;
  font-size: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #C8C8C8; 
}

.company-title {
  width: 20%;
}

.company-desc {
  width: 80%;
}

.w_100 {
  width: 100%;
}

/* ===================================================================
   働く環境 (WORK ENVIRONMENT)
   =================================================================== */

.lp-env-block {
  margin-bottom: 60px;
  background: #F8F5F5;
}

.lp-env-row {
  display: flex;
  align-items: center;
  /* gap: 40px; */
}

.lp-env-row.reverse {
  flex-direction: row-reverse;
}

.lp-env-text {
  flex: 1;
}

.lp-env-image {
  flex: 1;
  /* border-radius: 12px; */
  overflow: hidden;
}

.lp-env-image img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-env-text .desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

/* Diversity stats row */
.lp-stats-row {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.lp-stat-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.lp-stat-card .stat-label {
  font-size: 13px;
  color: #999;
  margin-bottom: 8px;
}

.lp-stat-card .stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #EE7203;
  line-height: 1;
}

.lp-stat-card .stat-unit {
  font-size: 14px;
  color: #666;
}

.lp-stat-card .stat-desc {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}

/* Chart style stat card */
.lp-stat-chart {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
}

/* ── Diversity row (text + charts) ── */
.lp-env-diversity {
  padding: 30px 24px;
  margin-bottom: 60px;
}

.lp-env-diversity .row {
  display: flex;
  align-items: center;
}

.lp-env-diversity-text {
  padding-right: 20px;
  align-items: center;
}

/* Charts row */
.lp-env-charts-row {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
}

.lp-env-chart-wrap {
  /* flex: 1; */
  text-align: center;
}

.lp-env-chart-wrap img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.lp-env-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px;
  text-align: center;
}

.lp-env-chart-canvas-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.lp-env-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.lp-env-block .row.lp-env-row {
  display: flex;
  align-items: center;
}

.lp-env-block .row.lp-env-row.reverse {
  flex-direction: row-reverse;
}

.lp-env-block .lp-env-image {
  overflow: hidden;
}

.lp-env-block .lp-env-image img {
  width: 100%;
  height: auto;
  display: block;
}

.lp-env-block .lp-env-text {
  padding: 0 20px;
}

.lp-env-block .lp-env-text .lp-env-block-title,
.lp-env-diversity-text .lp-env-block-title,
.lp-cta-card .cta-content h3 {
  font-size: 36px;
  font-weight: 800;
  color: #414144;
  margin-bottom: 16px;
}

.lp-env-block .lp-env-text .desc,
.lp-env-diversity-text .desc {
  font-size: 18px;
  color: #414141;
  line-height: 1.3;
}

.lp-env-block .lp-env-text .desc b,
.lp-env-diversity-text .desc b {
  font-weight: 900;
  color: #414141;
  font-size: 25px;
}

/* ===================================================================
   OFFICE INTRODUCTION – Bootstrap Carousel (inside section-work-env)
   =================================================================== */
.lp-office-block {
  margin-top: 60px;
}

.lp-office-block .lp-section-title h2::after {
  background: #EE7203;
}

/* Bootstrap carousel overrides */
.lp-office-carousel {
  position: relative;
  overflow: hidden;
}

.lp-office-carousel .carousel-inner {
  overflow: hidden;
}

.lp-office-carousel .carousel-inner > .item {
  transition: left 0.6s ease-in-out;
  height: 100%;
}

.lp-office-carousel .carousel-inner > .item.active,
.lp-office-carousel .carousel-inner > .item.next,
.lp-office-carousel .carousel-inner > .item.prev {
  display: flex;
  justify-content: flex-end;
}

/* Each slide */
.lp-office-slide {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  background-color: #2b2b2b;
  width: 75%;
}

.lp-office-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Info card */
.lp-office-slide-card {
  position: absolute;
  z-index: 2;
  background: #F8F5F5;
  padding: 20px;
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  bottom: 30%;
  right: 65%;
}

.lp-office-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lp-office-card-icon {
  flex-shrink: 0;
}

.lp-office-card-name.title {
  position: relative;
  height: fit-content;
  bottom: -10%;
  right: 18%;
}

.lp-office-card-name {
  font-size: 36px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  color: #414141;
  margin: 0;
}

.lp-office-card-address {
  font-size: 18px;
  color: #414141;
  line-height: 1.7;
  margin: 0;
  width: 80%;
}

/* Next arrow – styled as custom icon button, hides default Bootstrap caret */
.lp-office-next.right.carousel-control {
  position: absolute;
  bottom: 44px;
  right: 15px;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: 3;
  background: none;
  background-image: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  transition: transform 0.2s;
  opacity: 1;
  text-shadow: none;
  font-size: 0;
}

.lp-office-next.right.carousel-control:hover,
.lp-office-next.right.carousel-control:focus {
  transform: translateX(4px);
  opacity: 1;
  background: none;
  background-image: none;
}

.lp-office-next.right.carousel-control img {
  width: 50px;
  height: 20px;
}

/* Hide default Bootstrap carousel prev control & indicators */
.lp-office-carousel .left.carousel-control,
.lp-office-carousel .carousel-indicators {
  display: none;
}

/* ===================================================================
   SPEAKERS – 社員の声
   =================================================================== */
.lp-speakers {
  background: #F8F5F5;
  padding: 80px 0;
}

/* Speakers mobile carousel: section title shown above carousel */
.lp-speakers-mobile-title {
  display: none;
}

/* ── Desktop 3-col grid ── */
.lp-speakers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Title cell */
.lp-speakers-title-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: transparent;
}

.lp-speakers-section-title {
  font-size: 42px;
  font-weight: 800;
  color: #333;
  position: relative;
  padding-bottom: 16px;
  margin: 0;
  line-height: 1.2;
}

.lp-speakers-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: #EE7203;
  border-radius: 2px;
}

/* Speaker card */
.lp-speaker-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 550px;
  background: #d9d9d9;
}

.lp-speaker-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s;
}

.lp-speaker-card:hover .lp-speaker-photo,
.lp-speaker-card.active .lp-speaker-photo {
  transform: scale(1.04);
}

/* Default overlay – name + info at bottom */
.lp-speaker-default {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #414141B2;
  padding: 10px;
  color: #fff;
  transition: opacity 0.3s;
  border-radius: 6px;
  margin: 15px;
}

.lp-speaker-default .lp-speaker-name {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
}

.lp-speaker-default .lp-speaker-info {
  font-size: 16px;
  line-height: 1.5;
  /* opacity: 0.88; */
}

/* Hover overlay – full-cover dark panel */
.lp-speaker-hover {
  position: absolute;
  inset: 0;
  background: #414141B2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s; 
  pointer-events: none;
  margin: 10px;
  border-radius: 6px;
}

.lp-speaker-card:hover .lp-speaker-hover,
.lp-speaker-card.active .lp-speaker-hover {
  opacity: 1;
  pointer-events: auto;
}

.lp-speaker-card:hover .lp-speaker-default,
.lp-speaker-card.active .lp-speaker-default {
  opacity: 0;
}

.lp-speaker-hover-quote {
  display: block;
  width: 35px;
  height: auto;
  margin-bottom: 14px;
  opacity: 0.9;
}

.lp-speaker-hover-top {
  flex: 1;
}

.lp-speaker-hover-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
}

.lp-speaker-hover-footer {
  margin-top: 16px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-speaker-hover-name {
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 4px;
}

.lp-speaker-hover-info {
  font-size: 16px;
  line-height: 1.5;
}

/* ── Speaker hover measuring helper ───────────────────────────────────────
   Applied temporarily in JS to flow the hidden overlay into the document
   so its natural height can be measured, then removed immediately.
   ── */
.lp-speaker-hover.is-measuring {
  position: relative !important;
  inset: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;   /* invisible but still occupies space */
  pointer-events: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile carousel – hidden on desktop */
.lp-speakers-carousel {
  display: none;
}

/* CTA mobile carousel – hidden on desktop */
.lp-cta-carousel {
  display: none;
}

/* ===================================================================
   CTA SECTION
   =================================================================== */
.lp-cta {
  padding: 60px 0;
  background: #fff;
}

.lp-cta-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 40px;
}

.lp-cta-cards {
  display: flex;
  justify-content: center;
}

.lp-cta-cards .lp-cta-card:first-child {
  border-right: 1px solid #E7E2E2;
}

.lp-cta-card {
  flex: 1;
  /* max-width: 480px; */
  background: #F7F7F7;
  padding: 30px 55px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: box-shadow 0.3s;
}

.lp-cta-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.lp-cta-card .cta-icon {
  width: 60px;
  height: auto;
  flex-shrink: 0;
}

.cta-content a {
  font-size: 18px;
}

a:focus, a:hover {
  text-decoration: unset;
  border: unset!important;
  color: #fff !important;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.lp-footer {
  background: #414141;
  color: #fff;
  padding: 50px 0;
}

.lp-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* gap: 30px; */
  flex-wrap: wrap;
}

.lp-footer-info h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.lp-footer-content .lp-footer-info {
  /* max-width: 300px; */
  flex: 1;
  font-size: 16px;
}

.lp-footer-info p,
.lp-footer-info address {
  font-size: 16px;
  color: #fff;
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 0;
}

.lp-footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px;
}

.lp-footer-social a {
  display: flex;
  width: auto;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.lp-footer-social a:hover {
  background: #EE7203;
}

.lp-footer-social a img {
  width: 50px;
  height: 50px;
}
/* ===================================================================
   SCROLL TO TOP
   =================================================================== */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: #EE7203;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
  font-size: 20px;
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  background: #d46503;
}

/* ===================================================================
   WOW ANIMATION HELPERS
   =================================================================== */
.wow {
  visibility: hidden;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 991px) {
  .lp-header-nav {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }

  .lp-header-nav.open {
    display: flex;
  }

  .lp-nav-link {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
  }

  .lp-nav-link.active::after {
    display: none;
  }

  .lp-nav-link:last-child {
    width: fit-content;
    margin-right: auto;
    padding: 6px 10px;
    margin-left: 10px;
  }

  .lp-menu-toggle {
    display: block;
  }

  /* Header: hide CTA + nav text on mobile, show only logo + toggle */
  .lp-header-cta {
    display: none;
  }

  .lp-header-content {
    padding: 0 10px;
    gap: 130px;
  }

  /* Blue hamburger lines to match design */
  .lp-menu-toggle span,
  .lp-menu-toggle span::before,
  .lp-menu-toggle span::after {
    background: #1565C0;
    width: 28px;
    height: 3px;
    border-radius: 2px;
  }

  .lp-menu-toggle.open span {
    background: transparent;
  }

  .lp-menu-toggle.open span::before,
  .lp-menu-toggle.open span::after {
    background: #1565C0;
  }

  /* Mobile nav dropdown */
  .lp-header-nav {
    top: 80px;
    border-radius: 0 0 16px 16px;
    z-index: 999;
  }

  .lp-about-row,
  .lp-about-row.reverse,
  .lp-env-row,
  .lp-env-row.reverse {
    flex-direction: column;
    gap: unset;
  }

  .lp-env-block .row.lp-env-row,
  .lp-env-block .row.lp-env-row.reverse {
    flex-direction: column;
  }

  .lp-env-diversity {
    padding: 10px;
  }

  .lp-env-diversity .row {
    flex-direction: column;
  }

  .lp-env-diversity-text {
    padding-right: 0;
    /* margin-bottom: 24px; */
    text-align: left;
    align-items: flex-start;
  }

  .lp-env-diversity-text .lp-env-block-title,
  .lp-env-diversity-text .desc {
    text-align: left;
  }

  .lp-env-diversity .d-flex .lp-env-charts-row,
  .lp-env-diversity .d-flex > .lp-env-chart-wrap {
    flex: 1;
    min-width: 0;
    justify-content: space-around;
  }

  .lp-env-charts-row .lp-env-chart-wrap img,
  .lp-env-diversity .d-flex > .lp-env-chart-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
  }

  .lp-env-charts-row .lp-env-chart-wrap:first-child {
    width: 29%;
  }

  .lp-env-charts-row {
    gap: 20px;
  }

  .lp-env-block .lp-env-text {
    padding: 20px 10px 0;
  }

  .lp-stats-row {
    flex-direction: column;
    gap: 16px;
  }

  .lp-cta-cards {
    flex-direction: column;
    align-items: center;
  }

  .lp-cta-card {
    max-width: 100%;
  }

  .btn-entry {
    font-size: 18px;
  }

  .lp-banner-overlay {
    bottom: -61%;
  }
}

@media (max-width: 768px) {
  .lp-section {
    padding: 35px 0;
  }

  .lp-section-title {
    margin-bottom: 35px;
  }

  .lp-section-title h2,
  .lp-office-card-name {
    font-size: 30px;
  }

  #section-about .lp-about-block-title img {
    width: 55px;
  }

  .lp-about-block-title h3,
  .lp-env-block .lp-env-text .lp-env-block-title,
  .lp-env-diversity-text .lp-env-block-title, 
  .lp-cta-card .cta-content h3 {
    font-size: 25px;
  }

  .lp-banner-content .banner-title {
    font-size: 28px;
  }

  .lp-banner-slider .item .banner-image {
    display: none;
  }

  .lp-banner-slider .item .banner-image-mobile {
    display: block;
    width: 100%;
  }

  .lp-banner-thumbs {
    display: none;
  }

  .lp-banner-slider .owl-dots {
    display: block;
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
  }

  .lp-about-text div:first-child {
    width: 100%;
  }

  .d-flex-custom {
    flex-direction: column;
    gap: 10px;
  }

  .company-info p,
  .company-desc {
    font-size: 16px;
  }

  .company-info p {
    gap: 10px;
  }

  .lp-office-card-name.title::after {
    top: 6%;
    width: 55%;
    left: 28%;
  }

  .lp-speaker-card {
    margin: 0 21%;
  }

  /* Speakers: hide grid, show carousel + mobile title */
  .lp-speakers-grid {
    display: none;
  }

  .lp-speakers-mobile-title {
    display: block;
    margin-bottom: 24px;
  }

  .lp-speakers-mobile-title .lp-speakers-section-title {
    font-size: 30px;
  }

  .lp-speakers-carousel {
    display: block;
    position: relative;
    overflow: hidden;
  }

  .lp-speakers-section-title {
    font-size: 30px;
  }

  .lp-speakers-carousel .carousel-inner > .item {
    transition: left 0.6s ease-in-out;
  }

  .lp-speakers-carousel .left.carousel-control,
  .lp-speakers-carousel .right.carousel-control {
    display: none;
  }

  /* Speakers Bootstrap dot indicators */
  .lp-speakers-indicators {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .lp-speakers-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    margin: 0;
    cursor: pointer;
  }

  .lp-speakers-indicators li.active {
    background: #EE7203;
  }

  /* ── CTA: show Bootstrap carousel on mobile, hide desktop ── */
  .lp-cta-desktop {
    display: none !important;
  }

  .lp-cta-carousel {
    display: block;
    position: relative;
    overflow: hidden;
  }

  .lp-cta-carousel .carousel-inner > .item {
    transition: left 0.6s ease-in-out;
  }

  .lp-cta-carousel .lp-cta-card {
    background: #F7F7F7;
    padding: 30px 24px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border-right: none;
  }

  /* CTA: hide all carousel controls */
  .lp-cta-carousel .left.carousel-control,
  .lp-cta-carousel .right.carousel-control {
    display: none;
  }

  /* CTA Bootstrap dot indicators */
  .lp-cta-indicators {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 20px 0 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .lp-cta-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    margin: 0;
    cursor: pointer;
  }

  .lp-cta-indicators li.active {
    background: #EE7203;
  }

  /* ── Office block: stack info card above image on mobile ── */
  .lp-office-carousel .carousel-inner > .item.active,
  .lp-office-carousel .carousel-inner > .item.next,
  .lp-office-carousel .carousel-inner > .item.prev {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .lp-office-carousel .carousel-inner > .item > .d-flex {
    flex-direction: column;
    width: 100%;
    background: #fff;
  }

  .lp-office-card-name.title {
    position: static;
    margin-bottom: 12px;
  }

  .lp-office-slide-card {
    position: static;
    max-width: 100%;
    padding: 18px;
    box-shadow: none;
    background: #F8F5F5;
    bottom: auto;
    right: auto;
  }

  .lp-office-slide {
    width: 100%;
    min-height: 450px;
    padding: 16px;
  }

  .lp-office-next.right.carousel-control {
    position: static;
    margin-top: 10px;
    align-self: flex-start;
  }

  .lp-office-card-address {
    width: 100%;
  }

  .lp-office-card-header {
    margin-bottom: 8px;
  }

  .lp-office-block {
    margin-top: 40px;
  }

  .lp-footer-content {
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }
}

@media (max-width: 479px) {
  .lp-speaker-hover-desc {
    font-size: 15px;
  }

  .lp-office-slide {
    padding: 20px;
  }

  .lp-office-slide-card {
    max-width: 100%;
  }

  .lp-office-next.right.carousel-control {
    right: 16px;
    bottom: auto;
    top: 16px;
  }

  .lp-office-block {
    margin-top: 30px;
  }

  .lp-cta-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .lp-env-charts-row {
    align-items: center;
  }

  .lp-env-chart-wrap {
    flex: unset;
    width: 100%;
    max-width: 275px;
  }

  .lp-env-block .lp-env-text .desc b, .lp-env-diversity-text .desc b {
    font-size: 20px;
  }

  .lp-env-block .lp-env-text .desc p, 
  .lp-env-diversity-text .desc p,
  .lp-about-text .desc {
    font-size: 16px;
  }

  .lp-speaker-card {
    margin: unset;
  }

  .lp-banner-overlay {
    left: 20%;
    bottom: -70%;
  }

  .lp-env-charts-row .lp-env-chart-wrap:first-child {
    width: 61%;
  }
}