/* BCT TOP v2 — white / black / red, one graphic language */

body{background:#fff;color:#111}

/* HERO -------------------------------------------------- */
.hero--panel-field{
  position:relative;
  min-height:660px;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.hero--panel-field .hero__inner{
  position:relative;
  z-index:4;
  width:100%;
  padding:0 9vw 28px;
  text-align:center;
  pointer-events:none;
}
.hero--panel-field .hero__eyebrow{
  margin-bottom:28px;
  color:#111;
  font-size:10px;
  letter-spacing:.16em;
}
.hero--panel-field h1{
  margin:0 auto;
  max-width:1040px;
  font-size:clamp(46px,5.45vw,82px);
  line-height:1.23;
  letter-spacing:-.055em;
  font-weight:650;
}
.hero--panel-field .hero__news{
  z-index:5;
  left:32px;
  right:auto;
}

/* falling panel mark: always starts from the left */
.panel-field{
  position:absolute;
  z-index:1;
  top:54px;
  left:-2vw;
  right:auto;
  width:min(52vw,800px);
  height:500px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  pointer-events:none;
  opacity:.88;
}
.panel-field:after{
  content:"";
  position:absolute;
  inset:-28px -80px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.68) 82%,#fff 100%);
}
.panel-field__column{
  position:relative;
  z-index:1;
  width:clamp(68px,7.4vw,112px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.panel-field__column--5{height:100%}
.panel-field__column--4{height:81%}
.panel-field__column--3{height:63%}
.panel-field__column--2{height:44%}
.panel-field__column--1{height:24%}
.panel-field__piece{
  display:block;
  width:100%;
  flex:1 1 0;
  min-height:0;
  clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);
  opacity:0;
  transform:translateY(-680px) rotate(-2deg) scale(.98);
  animation:panel-drop .92s cubic-bezier(.16,.78,.18,1.03) var(--delay) forwards;
  will-change:transform,opacity;
}
.panel-field__piece--a{background:linear-gradient(118deg,#99141a 0%,#c91d25 42%,#f2a9ad 100%)}
.panel-field__piece--b{background:linear-gradient(118deg,#b61820 0%,#dc3d45 44%,#f7c8cb 100%)}
.panel-field__piece--c{background:linear-gradient(118deg,#d32b33 0%,#eb777d 46%,#fde6e8 100%)}
.panel-field__piece--d{background:linear-gradient(118deg,#e46369 0%,#f3aeb2 48%,#fff 100%)}
.panel-field__piece--e{background:linear-gradient(118deg,#ef969b 0%,#f8d4d6 52%,#fff 100%)}

/* common top page grammar ------------------------------- */
.top-section{padding:118px 7vw;border-bottom:1px solid #d7dbe0}
.top-section__eyebrow{font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:30px}
.top-section h2{margin:0;letter-spacing:-.045em}

/* ABOUT */
.top-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1fr);gap:10vw;align-items:start}
.top-about__title h2{font-size:clamp(40px,5.2vw,74px);line-height:1.25}
.top-about__copy{padding-top:44px;max-width:680px}
.top-about__copy p{margin:0 0 18px;font-size:15px;line-height:2;color:#333a40}
.top-about__link{display:inline-flex;align-items:center;gap:22px;margin-top:24px;font-size:12px;font-weight:700;border-bottom:1px solid #111;padding-bottom:7px}

/* OWN */
.top-own{padding:0;border-bottom:1px solid #111}
.top-own__head{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;padding:110px 7vw 68px;align-items:end}
.top-own__head h2{font-size:clamp(48px,6.3vw,92px);line-height:1;letter-spacing:-.065em}
.top-own__copy{max-width:580px;justify-self:end}
.top-own__copy p{font-size:14px;line-height:2;margin:0;color:#353b42}
.top-own__copy a{display:inline-flex;align-items:center;gap:20px;margin-top:28px;font-size:12px;font-weight:700;border-bottom:1px solid #111;padding-bottom:7px}
.top-own__media{position:relative;height:min(57vw,720px);min-height:480px;overflow:hidden;background:#eee}
.top-own__media img{width:100%;height:100%;object-fit:cover}
.top-own__media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18))}
.top-own__word{position:absolute;left:5vw;bottom:3.5vw;z-index:2;color:#fff;font-size:clamp(64px,11vw,160px);line-height:.8;font-weight:800;letter-spacing:-.08em}
.top-own__temp{position:absolute;right:18px;bottom:18px;z-index:3;background:rgba(255,255,255,.92);padding:6px 9px;font-size:8px;letter-spacing:.12em}

/* brand transition: reuse the same panel language, no new motif */
.top-transition{position:relative;height:180px;overflow:hidden;background:#fff;border-bottom:1px solid #d7dbe0}
.top-transition__line{position:absolute;left:7vw;right:7vw;top:50%;height:1px;background:#111}
.top-transition__panels{position:absolute;left:7vw;top:50%;transform:translateY(-50%);display:flex;gap:7px}
.top-transition__panels i{display:block;width:78px;height:58px;clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%)}
.top-transition__panels i:nth-child(1){background:#a9151b}
.top-transition__panels i:nth-child(2){background:#cf2730}
.top-transition__panels i:nth-child(3){background:#e7676d}
.top-transition__panels i:nth-child(4){background:#f3afb3}
.top-transition__panels i:nth-child(5){background:#fae0e2}

/* NEWS */
.top-news{padding:110px 7vw 128px}
.top-news__head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:46px}
.top-news__head h2{font-size:clamp(44px,5.8vw,80px);line-height:1}
.top-news__more{font-size:12px;font-weight:700;border-bottom:1px solid #111;padding-bottom:7px}
.top-news__list{border-top:1px solid #111}
.top-news__row{display:grid;grid-template-columns:110px 105px 1fr 38px;gap:24px;align-items:center;min-height:96px;border-bottom:1px solid #d7dbe0;font-size:13px}
.top-news__row time{font-size:11px;color:#6c737b}
.top-news__tag{font-size:10px;color:#9c171d}
.top-news__row strong{font-weight:560}
.top-news__arrow{font-size:18px;text-align:right}

/* closing field */
.top-close{background:#a9161d;color:#fff;padding:100px 7vw 84px}
.top-close__eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-bottom:22px}
.top-close__title{font-size:clamp(48px,6vw,88px);line-height:1.08;letter-spacing:-.055em;margin:0 0 78px;max-width:980px}
.top-close__links{border-top:1px solid rgba(255,255,255,.5)}
.top-close__links a{display:grid;grid-template-columns:70px 1fr 40px;align-items:center;min-height:92px;border-bottom:1px solid rgba(255,255,255,.3)}
.top-close__num{font-size:11px;opacity:.64}
.top-close__label{font-size:clamp(22px,2.7vw,36px);font-weight:600;letter-spacing:-.03em}
.top-close__arrow{text-align:right;font-size:18px}

/* footer inherits the closing color on the TOP only */
body.home-v2 .bct-footer{background:#a9161d;border-top:1px solid rgba(255,255,255,.28);min-height:360px;padding-top:56px}
body.home-v2 .bct-footer__bottom{margin-top:86px;border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.68)}
body.home-v2 .bct-footer__col a{color:rgba(255,255,255,.78)}

@media(max-width:900px){
  .hero--panel-field{min-height:600px}
  .hero--panel-field .hero__inner{padding:0 24px 40px}
  .hero--panel-field h1{font-size:clamp(40px,8.2vw,64px)}
  .hero--panel-field .hero__news{left:24px;right:24px}
  .panel-field{left:-19vw;top:66px;width:68vw;height:430px;opacity:.64;gap:6px}
  .panel-field__column{width:clamp(58px,9vw,86px);gap:6px}
  .panel-field:after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.86) 88%,#fff 100%)}
  .top-section{padding:86px 24px}
  .top-about{grid-template-columns:1fr;gap:38px}
  .top-about__copy{padding-top:0;max-width:720px}
  .top-own__head{grid-template-columns:1fr;padding:86px 24px 48px;gap:34px}
  .top-own__copy{justify-self:start}
  .top-own__media{height:64vw;min-height:440px}
  .top-transition{height:140px}
  .top-transition__line{left:24px;right:24px}
  .top-transition__panels{left:24px}
  .top-transition__panels i{width:62px;height:48px}
  .top-news{padding:86px 24px 100px}
  .top-news__row{grid-template-columns:92px 86px 1fr 28px;gap:14px}
  .top-close{padding:82px 24px 68px}
}

@media(max-width:600px){
  .hero--panel-field{min-height:560px}
  .hero--panel-field h1{font-size:clamp(36px,10vw,48px);line-height:1.3}
  .panel-field{left:-42vw;top:82px;width:90vw;height:350px;opacity:.46;gap:4px}
  .panel-field__column{width:16vw;gap:4px}
  .panel-field:after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 36%,rgba(255,255,255,.88) 82%,#fff 100%)}
  .top-section{padding:74px 20px}
  .top-section__eyebrow{margin-bottom:20px}
  .top-about__title h2{font-size:38px}
  .top-own__head{padding:74px 20px 40px}
  .top-own__head h2{font-size:54px}
  .top-own__media{height:78vw;min-height:360px}
  .top-own__word{left:20px;bottom:22px;font-size:72px}
  .top-transition{height:118px}
  .top-transition__line{left:20px;right:20px}
  .top-transition__panels{left:20px;gap:4px}
  .top-transition__panels i{width:46px;height:36px}
  .top-news{padding:74px 20px 86px}
  .top-news__head{align-items:start;flex-direction:column;margin-bottom:30px}
  .top-news__row{grid-template-columns:1fr 28px;gap:8px 18px;padding:22px 0;min-height:0}
  .top-news__row time,.top-news__tag{grid-column:auto}
  .top-news__row strong{grid-column:1/2;margin-top:8px;line-height:1.65}
  .top-news__arrow{grid-column:2/3;grid-row:1/4;align-self:center}
  .top-close{padding:74px 20px 56px}
  .top-close__title{margin-bottom:54px}
  .top-close__links a{grid-template-columns:54px 1fr 26px;min-height:78px}
  .top-close__label{font-size:24px}
}

@media(prefers-reduced-motion:reduce){
  .panel-field__piece{animation:none;opacity:1;transform:none}
}
