hesu-JT/css/business-pages.css

/* ============================================================
   business-pages.css — page-specific styles for the 5 business
   sub-pages (loaded AFTER business.css, which owns all shared
   components: hero, intro, caps, view-more, reveal, typography).
   Page hooks on <body>:
     .is-ae  auto-export          .is-bm  building-materials
     .is-as  after-sales          .is-gl  global-logistics
     .is-dh  development-history
   ============================================================ */

.bp-cap__ico { width: 52px; height: 52px; object-fit: contain; display: block; }
.bp-cap__label { font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1.35; }

/* ---------- per-page hero overrides ---------- */
.is-ae .bp-hero__bg { object-position: center 36%; }
/* .is-ae .bp-hero .btn-explore { background: #000; color: #fff; } */
/* .is-ae .bp-hero .btn-explore:hover { background: #ffe6c8; color: #0b141d; border-color: #ffe6c8; } */

.is-as .bp-hero__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}

.is-bm .bp-hero__bg { object-position: center right; }


.is-gl .bp-cap__label { line-height: 0.35; }


/* ############################################################
   AUTO EXPORT
   ############################################################ */

/* 3. VEHICLE SHOWCASE — centered title + wide image
   ============================================================ */ 
.ae-showcase { padding: 30px 0 60px; }
.ae-showcase__head { margin-bottom: 56px; }

.ae-showcase__img { width: 100%;  object-fit: cover; display: block; }

/* ============================================================
   4. BRANDS — 4-column logo wall
   ============================================================ */
.ae-brands { padding: 40px 0 120px; }
.ae-brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.ae-brand { display: flex; flex-direction: column; align-items: center; }
.ae-brand__card {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.ae-brand:hover .ae-brand__card {
  transform: translateY(-6px);
}
.ae-brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ae-brand__name {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a3340;
}

/* ============================================================
   5. AUTHORIZED VEHICLE MODELS — text + tag pills
   ============================================================ */
.ae-models {
  padding: 0px 0 110px;
}
/* .ae-models__inner { max-width: 920px; } */
.ae-models__body {margin-top: 8px; }

/* ============================================================
   6 + 7. REGIONAL SUPPORT → WORLD MAP
   ============================================================ */
.ae-region { padding: 120px 0 60px; }
.ae-region__head { text-align: center; margin-bottom: 72px; }

.ae-map {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1135 / 647;
}
.ae-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* SVG markers overlay — cycles one active marker at a time (main.js) */
.ae-map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* markers — entrance pops in with a staggered double ripple; exit reverses into
   the base states (dot shrinks, label slides away, ripples decay). Children own
   their hidden base states; the group itself never toggles opacity. */
.ae-map .marker .label {
  fill: #000;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 1px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
}
.ae-map .marker .dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.55);
  transition: opacity .28s ease, transform .28s ease;
}
.ae-map .marker .pulse {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .4s ease;
}
.ae-map .marker.orange .dot { fill: #ff8738; }
.ae-map .marker.orange .pulse { stroke: #ff8738; }
.ae-map .marker.yellow .dot { fill: #ffd21c; }
.ae-map .marker.yellow .pulse { stroke: #ffd21c; }
/* exit choreography — .out is added by main.js on deactivate */
.ae-map .marker.out .dot   { animation: ae-dotOut .28s ease both; }
.ae-map .marker.out .label { animation: ae-labelOut .3s ease both; }
.ae-map .marker.out .pulse { animation: ae-haloOut .45s ease-out both; }

.ae-map .marker.active .dot {
  animation: ae-dotIn .3s cubic-bezier(.2,1.5,.35,1) both,
             ae-breatheS 3.2s .8s ease-in-out infinite;
}
.ae-map .marker.yellow.active .dot { animation-name: ae-dotIn, ae-breatheL; }
.ae-map .marker.active .label { animation: ae-textIn .28s .06s ease both; }
.ae-map .marker.active .pulse { animation: ae-mapPulse .9s .15s ease-out infinite; }
.ae-map .marker.active .pulse.p2 { animation-delay: .6s; }

@keyframes ae-dotIn {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ae-textIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ae-mapPulse {
  0%   { opacity: .65; transform: scale(.45); }
  75%  { opacity: 0; transform: scale(2.25); }
  100% { opacity: 0; transform: scale(2.25); }
}
@keyframes ae-breatheS {
  0%, 100% { r: 5.5px; }
  50%      { r: 6.3px; }
}
@keyframes ae-breatheL {
  0%, 100% { r: 6px; }
  50%      { r: 6.9px; }
}
@keyframes ae-dotOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.55); }
}
@keyframes ae-labelOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(5px); }
}
@keyframes ae-haloOut {
  from { opacity: .5; }
  to   { opacity: 0; }
}

@keyframes ae-pulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(255,138,30,.2), 0 0 16px rgba(255,138,30,.7); }
  50%     { box-shadow: 0 0 0 11px rgba(255,138,30,.05), 0 0 24px rgba(255,138,30,.95); }
}
/* ---------- page-specific responsive ---------- */
@media (max-width: 1024px) {
  .ae-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .ae-showcase { padding: 10px 0 90px; }
  .ae-brands { padding: 30px 0 90px; }
  .ae-models { padding: 90px 0; }
  .ae-region { padding: 90px 0 40px; }
  .ae-region__head { margin-bottom: 48px; }
  /* on narrow screens the floating labels crowd the map — show a legend instead */
}
@media (max-width: 480px) {
  .ae-brands__grid { grid-template-columns: 1fr; }
}

/* ############################################################
   AFTER-SALES
   ############################################################ */

/* ============================================================
   3. SERVICE CONTENTS — centered title + 6 circular services (3 × 2)
   ============================================================ */
.as-services {
  /*padding: 100px 0 120px;*/
}
.as-services__head { text-align: center; margin-bottom: 76px; }
.as-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 44px;
  justify-items: center;
}
.as-svc {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: 100%;
  max-width: 260px;
}
.as-svc__ring img { width: 100%; height: auto; display: block; transition: transform .45s var(--ease); }
/* decorative dashed orbit ring */
.as-svc:hover .as-svc__ring img { transform: scale(1.08); }
.as-svc__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--text-dark);
  line-height: 1.4;
}

/* ============================================================
   4. REGIONAL SUPPORT — centered title + 3 location cards
   ============================================================ */
.as-region { padding: 120px 0 120px; }
.as-region__head { text-align: center; margin-bottom: 72px; }
.as-region__head .bp-body { margin-top: 8px; margin-inline: auto; max-width: 1000px; }

.as-region__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.as-loc {
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.as-loc__media { aspect-ratio: 16 / 10; overflow: hidden; }
.as-loc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.as-loc:hover .as-loc__media img { transform: scale(1.06); }
/* location card title — city on line 1, country on line 2, identical type */
.as-loc__title {
  padding: 22px 20px 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #404040;
}

/* ---------- page-specific responsive ---------- */
@media (max-width: 1024px) {
  .as-region__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .as-services { padding: 80px 0 90px; }
  .as-services__head { margin-bottom: 52px; }
  .as-region { padding: 90px 0 100px; }
  .as-region__head { margin-bottom: 48px; }
  .as-services__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
}
@media (max-width: 480px) {
  .as-services__grid { grid-template-columns: 1fr;  margin-inline: auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .as-loc__media img { animation: none !important; }
}

/* ############################################################
   BUILDING MATERIALS
   ############################################################ */

/* ============================================================
   5. LARGE INVENTORY IMAGE — stacked corrugated pipe stock
   ============================================================ */
.bm-stock { padding: 10px 0 0; }
.bm-stock__frame {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.bm-stock__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   6 + 7. PRODUCT CATEGORIES — centered title + 5-col cards
   ============================================================ */
.bm-products { padding: 120px 0 40px; }
.bm-products__head { text-align: center; margin-bottom: 64px; }

.bm-products__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.bm-card { display: flex; flex-direction: column; }

.bm-card__img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .5s var(--ease);
}
.bm-card:hover .bm-card__img img { transform: scale(1.06); }
.bm-card__name {
  margin-top: 20px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text-mid);
  transition: color .25s;
}
.bm-card:hover .bm-card__name { color: var(--orange-700); }

/* ---------- page-specific responsive ---------- */
@media (max-width: 1024px) {
  .bm-products__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .bm-products { padding: 90px 0 30px; }
  .bm-products__head { margin-bottom: 44px; }
  .bm-stock__frame { padding: 0 18px; }
  .bm-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bm-products__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ############################################################
   GLOBAL LOGISTICS
   ############################################################ */

/* ============================================================
   PORT IMAGE — full-width port / cargo-ship photo
   ============================================================ */
.gl-port { padding: 10px 0 0; }
.gl-port__frame {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.gl-port__img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 70px rgba(16,24,40,0.18);
}

/* ============================================================
   SERVICE CONTENTS — centered title + 2×3 round cards
   ============================================================ */
.gl-services { padding: 120px 0 40px; }
.gl-services__head { text-align: center; margin-bottom: 64px; }

.gl-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}
.gl-svc { display: flex; flex-direction: column; align-items: center; }
/* service icon = self-contained round artwork (image/global-logistics/Service*.png),
   shown bare like after-sales — no extra CSS circle around it */
.gl-svc__ico {
  width: clamp(140px, 13vw, 190px);
  transition: transform .4s var(--ease);
}
.gl-svc__ico img { width: 100%; height: auto; display: block; }
.gl-svc:hover .gl-svc__ico { transform: translateY(-6px); }
.gl-svc__name {
  margin-top: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  transition: color .25s;
}
.gl-svc:hover .gl-svc__name { color: var(--orange-700); }

/* ---------- page-specific responsive ---------- */
@media (max-width: 760px) {
  .gl-services { padding: 90px 0 30px; }
  .gl-services__head { margin-bottom: 44px; }
  .gl-port__frame { padding: 0 18px; }
  .gl-services__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .gl-svc__ico { width: 140px; }
}
@media (max-width: 480px) {
  .gl-services__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ############################################################
   DEVELOPMENT HISTORY
   ############################################################ */

/* ============================================================
   1. HERO — staggered oversized orange wordmark
   ============================================================ */

/* override the shared hero's vertical centering: anchor the copy
   from the TOP with an explicit offset (tweak margin-top to move it) */
.dh-hero { align-items: stretch; }
.dh-hero .bp-hero__copy { align-items: stretch; }  /* spacing now comes from business.css split layout */
.dh-hero__title {
  -webkit-text-fill-color: var(--orange-500);
  color: var(--orange-500);
  background: none;
  width: 100%;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-shadow: 0 8px 44px rgba(0,0,0,.5);
}
.dh-hero__title .dh-plus { color: var(--orange-300); }

.dh-line { display: block; }
.dh-line--lg {
  font-size: clamp(2.75rem, 11vw, 9rem);
  text-align: left;
  margin-bottom: 2rem; /* let the two lines interlock slightly */
}
.dh-line--sm {
  font-size: clamp(1.8rem, 7vw, 6rem);
  text-align: right;
  margin-top: -0.06em; /* let the two lines interlock slightly */
}

/* ============================================================
   2. DEVELOPMENT HISTORY — title + folded two-row timeline
   Each row = blocks separated by a date node. A node is
   CALENDAR ICON → vertical line → DOT (top to bottom).
   Row 1 and row 2 are joined by one such dividing node.
   ============================================================ */
.dh-timeline-section { padding: 110px 0 130px; }

.dh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-bottom: 96px;
}
.dh-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--orange-700);
  margin: 0;
}

/* ---------- folded route ---------- */
.dh-route { position: relative; }

.dh-rail {
  position: relative;
  display: flex;
  align-items: stretch;
}
.dh-rail--2 { max-width: 860px; margin-left: auto; margin-right: auto; }

.dh-stage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
.dh-stage__card {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.dh-stage__img {
  flex-shrink: 0;
  /* width: 116px; */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(16,24,40,.14);
}
.dh-stage__body { padding-top: 2px; }
.dh-stage__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.dh-stage__text {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}

.dh-node {
  flex: 0 0 auto;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -60px;
  margin-bottom: -60px;
}
/* mirror the two rows around the timeline axis:
   row 1 (above the axis) reads bottom→top so the CALENDAR hugs the axis below it;
   row 2 (below the axis) reads top→bottom so the CALENDAR hugs the axis above it */
.dh-rail--1 .dh-node { flex-direction: column-reverse; }
.dh-node__cal {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.dh-node__cal svg { width: 17px; height: 17px; }
.dh-node__line {
  flex: 1 1 auto;
  width: 1px;
  margin: 10px 0;
  background: #000;
}
.dh-node__dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-dark);
}

.dh-fold {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  margin: 40px 0;
}
.dh-fold__line {
  width: 100%;
  height: 1px;
  background: #000;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dh-timeline-section { padding: 90px 0 100px; }
  .dh-head { margin-bottom: 64px; }
  .dh-stage__img { width: 96px; }
  .dh-node { width: 44px; }
}
@media (max-width: 760px) {
  /* stack blocks; each node becomes a centered horizontal divider */
  .dh-rail { flex-direction: column; }
  .dh-rail--2 { max-width: none; }
  .dh-stage { flex: none; }
  .dh-node,
  .dh-rail--1 .dh-node {
    width: 100%;
    height: 52px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .dh-node__cal { position: relative; z-index: 1; }
  .dh-node__line {
    position: absolute;
    top: 50%; left: 0; right: 0;
    width: auto; height: 2px;
    margin: 0;
    transform: translateY(-50%);
  }
  .dh-node__dot { display: none; }
  .dh-fold { height: 56px; }
}
@media (max-width: 480px) {
  .dh-stage__card { flex-direction: column; gap: 12px; }
  .dh-stage__img { width: 100%; }
}