/* about-v2 — brand narrative page in new AICAD system */

body.ll-shell[data-page="about"]{
  background:var(--ll-bg);
}

/* ——— 1. Immersive brand hero ——— */
.ab-hero{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:#0f1012;
  color:#f2f2f4;
}
.ab-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.ab-hero__media picture,
.ab-hero__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 42%;
}
.ab-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(15,16,18,0.28) 0%,
      rgba(15,16,18,0.12) 28%,
      rgba(15,16,18,0.45) 58%,
      rgba(15,16,18,0.88) 82%,
      rgba(15,16,18,0.96) 100%),
    linear-gradient(90deg,
      rgba(15,16,18,0.55) 0%,
      rgba(15,16,18,0.15) 42%,
      transparent 72%);
  pointer-events:none;
}
.ab-hero__body{
  position:relative;
  z-index:1;
  width:min(var(--ll-max),100%);
  margin:0 auto;
  padding:6.5rem var(--ll-gutter) 2.75rem;
}
.ab-hero__brand{
  margin:0 0 1rem;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(242,242,244,0.55);
}
.ab-hero h1{
  margin:0;
  max-width:14em;
  font-size:clamp(2.1rem,4.8vw,3.45rem);
  font-weight:460;
  letter-spacing:-0.035em;
  line-height:1.12;
  color:#fdfdfd;
}
.ab-hero__line{display:block}
.ab-hero__line + .ab-hero__line{margin-top:0.08em}
.ab-hero__lead{
  margin:1.15rem 0 0;
  max-width:34ch;
  font-size:clamp(1rem,1.25vw,1.1rem);
  line-height:1.65;
  color:rgba(242,242,244,0.62);
}
.ab-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem;
  margin-top:1.75rem;
}
.ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 1.25rem;
  border-radius:999px;
  font-size:0.94rem;
  font-weight:540;
  transition:background 0.2s var(--ll-ease), border-color 0.2s var(--ll-ease), color 0.2s var(--ll-ease);
}
.ab-btn--primary{
  background:var(--ll-blue);
  color:#fff;
  border:1px solid transparent;
}
.ab-btn--primary:hover{background:#0060c0}
.ab-btn--ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.4);
}
.ab-btn--ghost:hover{border-color:#fff}
.ab-hero__scroll{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:0.65rem;
  width:min(var(--ll-max),100%);
  margin:0 auto;
  padding:0 var(--ll-gutter) 1.5rem;
  font-size:0.78rem;
  letter-spacing:0.12em;
  color:rgba(242,242,244,0.42);
}
.ab-hero__scroll-line{
  width:2.5rem;
  height:1px;
  background:rgba(242,242,244,0.28);
}

/* ——— 2. Brand / company relationship ——— */
.ab-relation{
  padding:clamp(4.5rem,9vw,7rem) var(--ll-gutter);
  background:var(--ll-white);
}
.ab-relation__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.ab-relation__label{
  margin:0 0 1rem;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.14em;
  color:rgba(15,16,18,0.4);
}
.ab-relation__name{
  margin:0;
  font-size:clamp(3.5rem,8vw,5.75rem);
  font-weight:460;
  letter-spacing:-0.04em;
  line-height:0.95;
  color:var(--ll-ink);
}
.ab-relation__copy{
  max-width:36rem;
  padding-top:0.35rem;
}
.ab-relation__copy p{
  margin:0;
  font-size:clamp(1.12rem,1.6vw,1.35rem);
  font-weight:400;
  line-height:1.65;
  letter-spacing:-0.015em;
  color:rgba(15,16,18,0.78);
}
.ab-relation__copy p + p{
  margin-top:1.15rem;
  font-size:clamp(1.02rem,1.3vw,1.12rem);
  color:var(--ll-muted);
  line-height:1.7;
}

/* ——— 3. Product system — numbered editorial index ——— */
.ab-products{
  padding:clamp(4rem,8vw,6.5rem) var(--ll-gutter);
  background:var(--ll-bg);
}
.ab-products__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
}
.ab-products__head{
  margin:0 0 clamp(2rem,4vw,3rem);
  max-width:28rem;
}
.ab-products__label{
  margin:0 0 0.75rem;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.14em;
  color:rgba(15,16,18,0.4);
}
.ab-products__title{
  margin:0;
  font-size:clamp(1.75rem,3.2vw,2.45rem);
  font-weight:460;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:var(--ll-ink);
}
.ab-products__lead{
  margin:0.85rem 0 0;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ll-muted);
  max-width:34ch;
}
/* Large product-result showcase chapters (not thin UI strips) */
.ab-plist{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ll-line);
}
.ab-plist__item{
  border-bottom:1px solid var(--ll-line);
}
.ab-plist__link{
  display:grid;
  grid-template-columns:minmax(0,0.38fr) minmax(0,0.62fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:center;
  min-height:clamp(340px,36vw,410px);
  padding:clamp(1.35rem,2.4vw,1.75rem) 0;
  transition:opacity 0.22s var(--ll-ease);
}
.ab-plist__link:hover{opacity:0.88}
.ab-plist__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  max-width:22rem;
}
.ab-plist__num{
  display:block;
  margin:0 0 0.85rem;
  font-size:0.84rem;
  font-weight:520;
  letter-spacing:0.12em;
  color:var(--ll-blue);
}
.ab-plist__name{
  margin:0;
  font-size:clamp(1.35rem,2vw,1.7rem);
  font-weight:520;
  letter-spacing:-0.025em;
  color:var(--ll-ink);
  line-height:1.2;
}
.ab-plist__desc{
  margin:0.65rem 0 0;
  font-size:1rem;
  line-height:1.6;
  color:var(--ll-muted);
  max-width:26ch;
}
.ab-plist__note{
  margin:0.85rem 0 0;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:rgba(15,16,18,0.38);
  line-height:1.4;
}
.ab-plist__go{
  display:inline-flex;
  margin-top:1.35rem;
  padding:0.55rem 0;
  min-height:2.75rem;
  align-items:center;
  font-size:0.95rem;
  font-weight:520;
  color:var(--ll-ink);
  border-bottom:1px solid rgba(15,16,18,0.18);
  white-space:nowrap;
}
.ab-plist__media{
  margin:0;
  width:100%;
  height:clamp(300px,32vw,360px);
  min-height:300px;
  max-height:360px;
  overflow:hidden;
  background:#f0f1f3;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ab-plist__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
.ab-products__more{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  margin-top:1.75rem;
  font-size:0.98rem;
  font-weight:520;
  color:var(--ll-ink);
  border-bottom:1px solid rgba(15,16,18,0.2);
  padding-bottom:0.15rem;
  transition:opacity 0.2s var(--ll-ease);
}
.ab-products__more:hover{opacity:0.65}

/* ——— 4. Direction — dark chapter ——— */
.ab-direction{
  padding:clamp(5rem,10vw,7.5rem) var(--ll-gutter);
  background:#0f1012;
  color:#f2f2f4;
}
.ab-direction__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
  max-width:42rem;
}
.ab-direction__label{
  margin:0 0 1.15rem;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.14em;
  color:rgba(242,242,244,0.38);
}
.ab-direction__title{
  margin:0;
  font-size:clamp(1.85rem,3.6vw,2.75rem);
  font-weight:460;
  letter-spacing:-0.03em;
  line-height:1.18;
  color:#fdfdfd;
}
.ab-direction__body{
  margin:1.35rem 0 0;
  font-size:clamp(1.05rem,1.35vw,1.15rem);
  line-height:1.7;
  color:rgba(242,242,244,0.55);
  max-width:36ch;
}

/* ——— 5. Contact entry ——— */
.ab-cta{
  padding:clamp(4.5rem,9vw,6.5rem) var(--ll-gutter);
  background:var(--ll-blue);
  color:#fff;
  text-align:center;
}
.ab-cta__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
}
.ab-cta h2{
  margin:0;
  font-size:clamp(1.85rem,3.5vw,2.65rem);
  font-weight:520;
  letter-spacing:-0.03em;
  line-height:1.15;
}
.ab-cta p{
  margin:1rem auto 0;
  max-width:32ch;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,0.8);
}
.ab-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.9rem;
  margin-top:1.85rem;
}
.ab-cta .ab-btn--light{
  background:#fff;
  color:var(--ll-ink);
  border:1px solid transparent;
}
.ab-cta .ab-btn--light:hover{background:rgba(255,255,255,0.92);color:var(--ll-ink)}
.ab-btn--ghost-light{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.45);
}
.ab-btn--ghost-light:hover{border-color:#fff}
.ab-cta .ab-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* shell footer on about: content height */
body.ll-shell[data-page="about"] .ll-footer{
  min-height:auto;
}

/* reveals used by site-shell-v2 */
.ab-hero .ll-reveal,
.ab-relation .ll-reveal,
.ab-products .ll-reveal,
.ab-direction .ll-reveal,
.ab-cta .ll-reveal{
  /* inherits body.ll-shell .ll-reveal */
}

@media (max-width:1023px){
  .ab-relation__inner{
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .ab-plist__link{
    grid-template-columns:1fr;
    gap:1.25rem;
    min-height:0;
    padding:1.75rem 0 2rem;
    align-items:stretch;
  }
  .ab-plist__text{max-width:none}
  .ab-plist__media{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:16 / 9;
  }
  .ab-plist__go{
    margin-top:1.1rem;
    min-height:2.85rem;
  }
}

@media (max-width:640px){
  .ab-hero__body{
    padding:5.5rem var(--ll-gutter) 2rem;
  }
  .ab-hero h1{max-width:none}
  .ab-hero__lead{max-width:none}
  .ab-hero__media img{object-position:center 38%}
  .ab-relation__name{
    font-size:clamp(3rem,14vw,3.75rem);
  }
  .ab-plist__link{
    gap:1.1rem;
    padding:1.5rem 0 1.75rem;
  }
  .ab-plist__name{font-size:1.28rem}
  .ab-plist__desc{max-width:none;font-size:0.98rem}
  .ab-plist__media{
    aspect-ratio:16 / 9;
    width:100%;
  }
  .ab-plist__go{
    min-height:3rem;
    padding:0.65rem 0;
  }
  .ab-direction__body{max-width:none}
  .ab-cta p{max-width:none}
}