/**

 * Japan Bike Export — custom.css

 * Luxury global trade house — Charcoal / Copper / Gold

 */



:root {

  --jbe-charcoal: #1C1917;

  --jbe-charcoal-deep: #0C0A09;

  --jbe-copper: #B87333;

  --jbe-copper-light: #CD7F32;

  --jbe-gold: #D4AF37;

  --jbe-gold-pale: #F5E6A3;

  --jbe-parchment: #F5F0E8;

  --jbe-stone: #A8A29E;

  --jbe-stone-dim: #78716C;

  --jbe-nav-h: 4.75rem;

  --jbe-glass: rgba(28, 25, 23, 0.65);

  --jbe-hairline: rgba(212, 175, 55, 0.18);

}



html.lenis, html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }



/* Metal texture overlay */

.jbe::before {

  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9998;

  opacity: 0.025;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* Skip link */

.skip-link {

  position: absolute;

  top: -100%;

  left: 1rem;

  z-index: 9999;

  padding: 0.75rem 1.25rem;

  background: var(--jbe-gold);

  color: var(--jbe-charcoal-deep);

  font-size: 0.875rem;

  border-radius: 0.25rem;

  transition: top 0.2s;

}

.skip-link:focus { top: 1rem; }



/* Scroll progress — gold hairline */

.jbe-progress {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  z-index: 100;

  background: rgba(184, 115, 51, 0.08);

}

.jbe-progress span {

  display: block;

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, var(--jbe-copper), var(--jbe-gold), var(--jbe-gold-pale));

  transition: width 0.08s linear;

}



/* Nav */

.jbe-nav {

  background: rgba(12, 10, 9, 0.88);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  transition: background 0.4s, box-shadow 0.4s;

}

.jbe-nav.is-scrolled {

  background: rgba(12, 10, 9, 0.96);

  box-shadow: 0 1px 0 var(--jbe-hairline);

}

.jbe-nav__line {

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(184, 115, 51, 0.4), rgba(212, 175, 55, 0.25), transparent);

}

.nav-link {
  white-space: nowrap;
}

.nav-link::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 0;

  height: 1px;

  background: linear-gradient(90deg, var(--jbe-copper), var(--jbe-gold));

  transition: width 0.35s ease;

}

.nav-link:hover::after,

.nav-link.is-active::after { width: 100%; }



#menuToggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

#menuToggle.is-open span:nth-child(2) { opacity: 0; }

#menuToggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobileMenu.is-open { transform: translateX(0); }



/* Buttons */

.btn-gold {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.8rem 1.85rem;

  font-family: 'IBM Plex Sans JP', sans-serif;

  font-size: 0.8125rem;

  font-weight: 500;

  letter-spacing: 0.14em;

  color: var(--jbe-charcoal-deep);

  background: linear-gradient(135deg, var(--jbe-gold) 0%, var(--jbe-gold-pale) 50%, var(--jbe-gold) 100%);

  border: 1px solid rgba(212, 175, 55, 0.6);

  border-radius: 0.125rem;

  position: relative;

  overflow: hidden;

  transition: box-shadow 0.35s, transform 0.35s;

}

.btn-gold::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);

  transform: translateX(-100%);

  transition: transform 0.6s;

}

.btn-gold:hover {

  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255,255,255,0.2);

}

.btn-gold:hover::before { transform: translateX(100%); }



.btn-outline {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.8rem 1.85rem;

  font-family: 'IBM Plex Sans JP', sans-serif;

  font-size: 0.8125rem;

  font-weight: 500;

  letter-spacing: 0.14em;

  color: var(--jbe-parchment);

  background: transparent;

  border: 1px solid rgba(184, 115, 51, 0.35);

  border-radius: 0.125rem;

  transition: border-color 0.35s, color 0.35s, background 0.35s, box-shadow 0.35s;

}

.btn-outline:hover {

  border-color: var(--jbe-gold);

  color: var(--jbe-gold-pale);

  background: rgba(184, 115, 51, 0.08);

  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.1);

}



.gold-underline {

  position: relative;

  display: inline-block;

}

.gold-underline::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 1px;

  background: linear-gradient(90deg, var(--jbe-copper), var(--jbe-gold));

  transition: width 0.4s ease;

}

a:hover .gold-underline::after { width: 100%; }



/* ═══ SPLIT-SCREEN LUXURY HERO ═══ */

.split-hero {

  min-height: 100svh;

  display: grid;

  grid-template-columns: 1fr;

  padding-top: var(--jbe-nav-h);

  background: var(--jbe-charcoal-deep);

  position: relative;

}

.split-hero::before {

  content: '';

  position: absolute;

  top: var(--jbe-nav-h);

  left: 0;

  bottom: 0;

  width: 1px;

  background: linear-gradient(180deg, transparent, var(--jbe-hairline), transparent);

  z-index: 5;

  display: none;

}

@media (min-width: 1024px) {

  .split-hero {

    grid-template-columns: 1fr 1fr;

    min-height: 100svh;

  }

  .split-hero::before { display: block; left: 50%; }

}



.split-hero__copy {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 3rem 1.25rem 2rem;

  position: relative;

  z-index: 2;

  background:

    radial-gradient(ellipse at 20% 80%, rgba(184, 115, 51, 0.06) 0%, transparent 50%),

    var(--jbe-charcoal-deep);

}

@media (min-width: 640px) { .split-hero__copy { padding: 3rem 2rem 2rem; } }

@media (min-width: 1024px) {

  .split-hero__copy {

    padding: 4rem 3rem 4rem max(2rem, calc((100vw - 80rem) / 2 + 2rem));

  }

}



.split-hero__visual {

  position: relative;

  min-height: 55vh;

  overflow: hidden;

}

@media (min-width: 1024px) {

  .split-hero__visual { min-height: calc(100svh - var(--jbe-nav-h)); }

}



.split-hero__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 30%;

}



.split-hero__veil {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, var(--jbe-charcoal-deep) 0%, transparent 25%),

    linear-gradient(180deg, transparent 50%, rgba(12, 10, 9, 0.85) 100%),

    linear-gradient(135deg, rgba(184, 115, 51, 0.35) 0%, rgba(205, 127, 50, 0.15) 40%, transparent 70%);

  pointer-events: none;

}



.split-hero__grid {

  position: absolute;

  inset: 0;

  opacity: 0.04;

  background-image:

    linear-gradient(rgba(212, 175, 55, 0.3) 1px, transparent 1px),

    linear-gradient(90deg, rgba(212, 175, 55, 0.3) 1px, transparent 1px);

  background-size: 64px 64px;

  pointer-events: none;

}



/* Glass stat cards */

.glass-stat {

  background: var(--jbe-glass);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(184, 115, 51, 0.28);

  border-radius: 0.25rem;

  padding: 1rem 1.25rem;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(212, 175, 55, 0.08);

}

.glass-stat__value {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.875rem;

  font-weight: 600;

  color: var(--jbe-gold);

  line-height: 1.2;

}

.glass-stat__label {

  font-size: 0.625rem;

  letter-spacing: 0.18em;

  color: var(--jbe-stone);

  margin-top: 0.25rem;

}



.split-hero__stats {

  position: absolute;

  bottom: 2rem;

  left: 1.5rem;

  right: 1.5rem;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.75rem;

  z-index: 3;

}

@media (min-width: 640px) {

  .split-hero__stats {

    left: 2rem;

    right: auto;

    max-width: 24rem;

  }

}



/* Micro stats row in hero copy */

.hero-micro-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  margin-top: 2.5rem;

  padding-top: 2rem;

  border-top: 1px solid var(--jbe-hairline);

}

.hero-micro-stat__val {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--jbe-copper-light);

}

.hero-micro-stat__lbl {

  font-size: 0.625rem;

  letter-spacing: 0.15em;

  color: var(--jbe-stone-dim);

  margin-top: 0.125rem;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.375rem 0.875rem;

  font-size: 0.625rem;

  letter-spacing: 0.22em;

  color: var(--jbe-gold);

  background: rgba(184, 115, 51, 0.1);

  border: 1px solid rgba(184, 115, 51, 0.35);

  border-radius: 999px;

}



.hero-manifesto {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.125rem, 2.5vw, 1.375rem);

  font-style: italic;

  color: var(--jbe-copper-light);

  line-height: 1.7;

  letter-spacing: 0.02em;

}



.hero-line {

  width: 4rem;

  height: 1px;

  background: linear-gradient(90deg, var(--jbe-copper), var(--jbe-gold), transparent);

  margin: 1.75rem 0;

}



/* Trust / awards bar */

.trust-bar {

  border-top: 1px solid var(--jbe-hairline);

  border-bottom: 1px solid var(--jbe-hairline);

  background: linear-gradient(90deg, var(--jbe-charcoal-deep), var(--jbe-charcoal), var(--jbe-charcoal-deep));

  overflow: hidden;

}

.trust-bar__track {

  display: flex;

  align-items: center;

  gap: 3rem;

  padding: 1rem 0;

  animation: trustScroll 40s linear infinite;

  width: max-content;

}

.trust-bar__item {

  display: flex;

  align-items: center;

  gap: 0.625rem;

  white-space: nowrap;

  font-size: 0.6875rem;

  letter-spacing: 0.2em;

  color: var(--jbe-stone);

  text-transform: uppercase;

}

.trust-bar__item i {

  color: var(--jbe-copper);

  font-size: 0.75rem;

}

@keyframes trustScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* Section utilities */

.section-label {

  font-family: 'Cormorant Garamond', serif;

  font-size: 0.75rem;

  letter-spacing: 0.4em;

  text-transform: uppercase;

  color: var(--jbe-copper);

}



.section-title {

  font-family: 'Noto Sans JP', sans-serif;

  font-size: clamp(1.75rem, 4vw, 2.5rem);

  font-weight: 500;

  letter-spacing: 0.05em;

  line-height: 1.35;

  color: var(--jbe-parchment);

}



.section-bg-alt {

  background:

    radial-gradient(ellipse at 50% 0%, rgba(184, 115, 51, 0.04) 0%, transparent 60%),

    linear-gradient(180deg, var(--jbe-charcoal-deep) 0%, var(--jbe-charcoal) 50%, var(--jbe-charcoal-deep) 100%);

}



.section-bg-metal {

  background:

    linear-gradient(180deg, rgba(28, 25, 23, 0.95) 0%, rgba(12, 10, 9, 0.98) 100%);

  position: relative;

}

.section-bg-metal::before {

  content: '';

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(

    90deg,

    transparent,

    transparent 2px,

    rgba(184, 115, 51, 0.02) 2px,

    rgba(184, 115, 51, 0.02) 3px

  );

  pointer-events: none;

}



.gold-hairline {

  width: 100%;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--jbe-hairline), transparent);

}



/* Pinned stats section */

.stats-pinned {

  position: relative;

}

.stats-pinned__inner {

  display: grid;

  gap: 1.5rem;

  grid-template-columns: repeat(2, 1fr);

}

@media (min-width: 1024px) {

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

}



.stat-card {

  padding: 2rem 1.5rem;

  border: 1px solid rgba(184, 115, 51, 0.15);

  border-radius: 0.25rem;

  background: rgba(28, 25, 23, 0.7);

  position: relative;

  overflow: hidden;

  transition: border-color 0.4s, transform 0.4s;

}

.stat-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);

}

.stat-card:hover {

  border-color: rgba(212, 175, 55, 0.35);

  transform: translateY(-4px);

}

.stat-card__num {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(2.25rem, 5vw, 3.25rem);

  font-weight: 600;

  color: var(--jbe-gold);

  line-height: 1;

}



/* Horizontal timeline — copper connectors */

.process-timeline {

  display: flex;

  gap: 0;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  padding-bottom: 2rem;

  scrollbar-width: thin;

  scrollbar-color: var(--jbe-copper) transparent;

  position: relative;

}

.process-timeline::before {

  content: '';

  position: absolute;

  top: 3.5rem;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg, var(--jbe-copper), var(--jbe-gold), var(--jbe-copper));

  opacity: 0.3;

  pointer-events: none;

}

.process-timeline::-webkit-scrollbar { height: 3px; }

.process-timeline::-webkit-scrollbar-thumb {

  background: var(--jbe-copper);

  border-radius: 2px;

}



.process-step {

  flex: 0 0 min(300px, 88vw);

  scroll-snap-align: start;

  position: relative;

  padding: 2.5rem 1.75rem 2rem;

  margin-right: 1.5rem;

  border: 1px solid rgba(184, 115, 51, 0.12);

  border-radius: 0.25rem;

  background: rgba(28, 25, 23, 0.6);

  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;

}

.process-step:hover {

  border-color: rgba(212, 175, 55, 0.35);

  background: rgba(184, 115, 51, 0.06);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

}

.process-step__num {

  font-family: 'Cormorant Garamond', serif;

  font-size: 2.75rem;

  font-weight: 700;

  color: rgba(184, 115, 51, 0.3);

  line-height: 1;

  margin-bottom: 1rem;

  position: relative;

}

.process-step__num::after {

  content: '';

  position: absolute;

  bottom: -0.5rem;

  left: 0;

  width: 2rem;

  height: 2px;

  background: var(--jbe-copper);

}

.process-step:not(:last-child)::after {

  content: '';

  position: absolute;

  right: -0.875rem;

  top: 3.25rem;

  width: 0.75rem;

  height: 0.75rem;

  border-radius: 50%;

  background: var(--jbe-charcoal);

  border: 2px solid var(--jbe-copper);

  z-index: 2;

}



/* Asymmetric editorial service cards */

.svc-editorial {

  display: grid;

  gap: 1.5rem;

}

@media (min-width: 1024px) {

  .svc-editorial { grid-template-columns: repeat(12, 1fr); }

}



.svc-card {

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(184, 115, 51, 0.12);

  border-radius: 0.25rem;

  background: var(--jbe-charcoal);

  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;

}

.svc-card--lg { grid-column: span 12; }

@media (min-width: 1024px) {

  .svc-card--lg { grid-column: span 7; min-height: 420px; }

  .svc-card--md { grid-column: span 5; min-height: 380px; }

  .svc-card--sm { grid-column: span 4; min-height: 340px; }

}

.svc-card:hover {

  border-color: rgba(212, 175, 55, 0.35);

  transform: translateY(-4px);

  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);

}

.svc-card__img-wrap {

  position: relative;

  overflow: hidden;

  height: 100%;

  min-height: 200px;

}

.svc-card--lg .svc-card__img-wrap { min-height: 280px; }

@media (min-width: 1024px) {

  .svc-card--lg {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

  }

  .svc-card--lg .svc-card__img-wrap { min-height: 100%; }

}

.svc-card__img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.75;

  transition: opacity 0.5s, transform 0.7s;

}

.svc-card:hover .svc-card__img {

  opacity: 0.9;

  transform: scale(1.04);

}

.svc-card__body {

  padding: 1.75rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.svc-card__icon {

  position: absolute;

  top: 1rem;

  right: 1rem;

  width: 2.75rem;

  height: 2.75rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--jbe-glass);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(184, 115, 51, 0.3);

  border-radius: 0.25rem;

  color: var(--jbe-gold);

  font-size: 0.875rem;

  z-index: 2;

}

.svc-card__tag {

  font-family: 'Cormorant Garamond', serif;

  font-size: 0.6875rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--jbe-copper);

}



/* Region panels — interactive map-style */

.region-panels {

  display: grid;

  gap: 0.75rem;

}

@media (min-width: 768px) {

  .region-panels { grid-template-columns: repeat(2, 1fr); }

}

@media (min-width: 1024px) {

  .region-panels { grid-template-columns: repeat(3, 1fr); }

}



.region-panel {

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(184, 115, 51, 0.12);

  border-radius: 0.25rem;

  min-height: 200px;

  cursor: pointer;

  transition: border-color 0.4s, transform 0.4s;

}

.region-panel.is-active,

.region-panel:hover {

  border-color: rgba(212, 175, 55, 0.45);

  transform: translateY(-2px);

}

.region-panel__bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.25;

  transition: opacity 0.5s, transform 0.6s;

  filter: saturate(0.6);

}

.region-panel.is-active .region-panel__bg,

.region-panel:hover .region-panel__bg {

  opacity: 0.45;

  transform: scale(1.05);

  filter: saturate(0.8);

}

.region-panel__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(12, 10, 9, 0.95) 0%, rgba(12, 10, 9, 0.5) 60%, rgba(12, 10, 9, 0.3) 100%);

}

.region-panel__body {

  position: relative;

  z-index: 2;

  padding: 1.5rem;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}

.region-panel__code {

  font-family: 'Cormorant Garamond', serif;

  font-size: 0.625rem;

  letter-spacing: 0.35em;

  color: var(--jbe-copper);

  margin-bottom: 0.5rem;

}

.region-panel__vol {

  font-family: 'Cormorant Garamond', serif;

  font-size: 1.75rem;

  font-weight: 600;

  color: var(--jbe-gold);

}

.region-panel__detail {

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition: max-height 0.45s ease, opacity 0.35s, margin 0.35s;

}

.region-panel.is-active .region-panel__detail {

  max-height: 4rem;

  opacity: 1;

  margin-top: 0.75rem;

}



/* Inspection feature */

.inspect-feature {

  display: grid;

  gap: 3rem;

  align-items: center;

}

@media (min-width: 1024px) {

  .inspect-feature { grid-template-columns: 1fr 1fr; }

}

.inspect-feature__img {

  position: relative;

  border-radius: 0.25rem;

  overflow: hidden;

  border: 1px solid rgba(184, 115, 51, 0.2);

}

.inspect-feature__img img {

  width: 100%;

  height: auto;

  display: block;

  opacity: 0.85;

}

.inspect-feature__img::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(184, 115, 51, 0.15) 0%, transparent 50%);

  pointer-events: none;

}

.inspect-checklist {

  display: flex;

  flex-direction: column;

  gap: 0;

}

.inspect-item {

  display: flex;

  gap: 1.25rem;

  padding: 1.5rem 1.25rem;

  border-bottom: 1px solid rgba(184, 115, 51, 0.1);

  transition: background 0.3s, padding-left 0.3s;

}

.inspect-item:first-child { border-top: 1px solid rgba(184, 115, 51, 0.1); }

.inspect-item:hover {

  background: rgba(184, 115, 51, 0.05);

  padding-left: 1.5rem;

}

.inspect-item__icon {

  flex-shrink: 0;

  width: 2.5rem;

  height: 2.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(184, 115, 51, 0.12);

  border: 1px solid rgba(184, 115, 51, 0.2);

  border-radius: 0.25rem;

  color: var(--jbe-gold);

}

.inspect-item__check {

  flex-shrink: 0;

  width: 1.25rem;

  height: 1.25rem;

  border: 1px solid var(--jbe-copper);

  border-radius: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--jbe-gold);

  font-size: 0.625rem;

  margin-top: 0.125rem;

}



/* Magazine news layout */

.news-magazine {

  display: grid;

  gap: 1.5rem;

}

@media (min-width: 1024px) {

  .news-magazine {

    grid-template-columns: 1.2fr 1fr;

    grid-template-rows: auto auto;

  }

}



.news-card {

  display: flex;

  flex-direction: column;

  border: 1px solid rgba(184, 115, 51, 0.12);

  border-radius: 0.25rem;

  overflow: hidden;

  background: var(--jbe-charcoal);

  transition: border-color 0.4s, transform 0.4s;

}

.news-card:hover {

  border-color: rgba(212, 175, 55, 0.35);

  transform: translateY(-3px);

}

.news-card--featured {

  grid-row: span 2;

}

@media (min-width: 1024px) {

  .news-card--featured .news-card__img { height: 320px; }

}

.news-card__img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  transition: transform 0.6s;

}

.news-card:hover .news-card__img { transform: scale(1.03); }

.news-card__tag {

  display: inline-block;

  font-family: 'Cormorant Garamond', serif;

  font-size: 0.625rem;

  letter-spacing: 0.2em;

  padding: 0.25rem 0.625rem;

  color: var(--jbe-gold);

  background: rgba(184, 115, 51, 0.12);

  border: 1px solid rgba(184, 115, 51, 0.2);

  border-radius: 999px;

}

.news-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }



/* FAQ — dark copper accordion */

.faq-section {

  background:

    radial-gradient(ellipse at 50% 100%, rgba(184, 115, 51, 0.08) 0%, transparent 60%),

    var(--jbe-charcoal-deep);

  border-top: 1px solid rgba(184, 115, 51, 0.15);

  border-bottom: 1px solid rgba(184, 115, 51, 0.15);

}

.faq-item {

  border-bottom: 1px solid rgba(184, 115, 51, 0.12);

}

.faq-item__btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.35rem 0;

  text-align: left;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 0.9375rem;

  color: var(--jbe-parchment);

  background: none;

  border: none;

  cursor: pointer;

  transition: color 0.3s;

}

.faq-item__btn:hover { color: var(--jbe-gold-pale); }

.faq-item__btn i {

  flex-shrink: 0;

  color: var(--jbe-copper);

  transition: transform 0.35s, color 0.3s;

}

.faq-item.is-open .faq-item__btn i {

  transform: rotate(180deg);

  color: var(--jbe-gold);

}

.faq-item__panel {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.45s ease, padding 0.45s ease;

}

.faq-item.is-open .faq-item__panel {

  max-height: 20rem;

  padding-bottom: 1.35rem;

}



/* Partner CTA — full bleed */

.cta-bleed {

  position: relative;

  overflow: hidden;

  min-height: 420px;

  display: flex;

  align-items: center;

  background: var(--jbe-charcoal-deep);

}

.cta-bleed__bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.2;

  filter: saturate(0.5);

}

.cta-bleed__veil {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(12, 10, 9, 0.95) 0%, rgba(12, 10, 9, 0.7) 50%, rgba(12, 10, 9, 0.85) 100%),

    linear-gradient(180deg, transparent, rgba(184, 115, 51, 0.1));

}

.cta-bleed__content {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 80rem;

  margin: 0 auto;

  padding: 5rem 1.25rem;

}

@media (min-width: 640px) { .cta-bleed__content { padding: 5rem 2rem; } }



.cta-panel {

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(184, 115, 51, 0.25);

  border-radius: 0.25rem;

  background: linear-gradient(135deg, rgba(184, 115, 51, 0.08) 0%, rgba(12, 10, 9, 0.95) 60%);

  padding: 3rem 2rem;

}

@media (min-width: 768px) { .cta-panel { padding: 4rem 3rem; } }

.cta-panel__glow {

  position: absolute;

  top: -50%;

  right: -20%;

  width: 60%;

  height: 200%;

  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);

  pointer-events: none;

}



/* Page banner */

.page-banner {

  position: relative;

  min-height: 45vh;

  display: flex;

  align-items: flex-end;

  padding: calc(var(--jbe-nav-h) + 3rem) 0 3rem;

  overflow: hidden;

  background: var(--jbe-charcoal-deep);

}

.page-banner__bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.35;

  filter: saturate(0.7);

}

.page-banner__veil {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(to top, var(--jbe-charcoal-deep) 0%, rgba(12, 10, 9, 0.75) 55%, rgba(12, 10, 9, 0.9) 100%),

    linear-gradient(135deg, rgba(184, 115, 51, 0.15) 0%, transparent 50%);

}

.page-banner__title {

  font-family: 'Noto Sans JP', sans-serif;

  font-size: clamp(2rem, 5vw, 3rem);

  font-weight: 500;

  letter-spacing: 0.05em;

}



/* Forms */

.jbe-input {

  width: 100%;

  padding: 0.875rem 1rem;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 0.875rem;

  color: var(--jbe-parchment);

  background: rgba(28, 25, 23, 0.85);

  border: 1px solid rgba(184, 115, 51, 0.2);

  border-radius: 0.25rem;

  outline: none;

  transition: border-color 0.3s, box-shadow 0.3s;

}

.jbe-input:focus {

  border-color: var(--jbe-gold);

  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);

}

.jbe-input::placeholder { color: rgba(168, 162, 158, 0.5); }

textarea.jbe-input { min-height: 140px; resize: vertical; }



.form-success {

  display: none;

  padding: 1rem 1.25rem;

  background: rgba(184, 115, 51, 0.1);

  border: 1px solid rgba(212, 175, 55, 0.3);

  border-radius: 0.25rem;

  color: var(--jbe-gold);

  font-size: 0.875rem;

}

.form-success.is-visible { display: block; }



.form-panel {

  padding: 2rem;

  border: 1px solid rgba(184, 115, 51, 0.15);

  border-radius: 0.25rem;

  background: rgba(28, 25, 23, 0.6);

}



/* Team / about */

.team-card {

  padding: 2rem;

  border: 1px solid rgba(184, 115, 51, 0.12);

  border-radius: 0.25rem;

  background: rgba(28, 25, 23, 0.6);

  transition: border-color 0.4s, transform 0.4s;

}

.team-card:hover {

  border-color: rgba(212, 175, 55, 0.3);

  transform: translateY(-3px);

}

.team-card__avatar {

  width: 3.5rem;

  height: 3.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: rgba(184, 115, 51, 0.12);

  border: 1px solid rgba(184, 115, 51, 0.25);

  color: var(--jbe-gold);

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 1.125rem;

  font-weight: 500;

  margin-bottom: 1.25rem;

}



/* Philosophy block */

.philosophy-block {

  padding: 3rem;

  border-left: 2px solid var(--jbe-copper);

  background: rgba(184, 115, 51, 0.04);

}

.philosophy-block__quote {

  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(1.25rem, 3vw, 1.625rem);

  font-style: italic;

  color: var(--jbe-parchment);

  line-height: 1.8;

}



/* Vertical writing */

.writing-vertical {

  writing-mode: vertical-rl;

  text-orientation: mixed;

}



/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

  .trust-bar__track { animation: none; }

}



/* === Visibility safety (blank section fix) === */
.stat-card,
.process-step,
.svc-card,
.hero-animate,
.hero-fade,
.hero-char,
.hero-reveal,
.hero-stat,
.hero-glass-card,
.hero-brand__title,
.hero-brand__kicker,
[data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}
.stats-pinned {
  min-height: auto !important;
}
.gallery-reveal,
.reveal-clip__inner {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}