/* About (about.html). Breakpoint: useMobile(768). */

/* Hero: full screen, pulled up under the sticky nav like the demo (-88px / -64px) */
.cc-about-hero{min-height:100vh;min-height:100dvh;margin-top:-88px;background:var(--amber);color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.cc-about-hero__title{margin:0;width:100%;max-width:1400px;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,11vw,165px);line-height:.9;letter-spacing:-0.05em;text-transform:uppercase}
.cc-about-hero__line{display:block;overflow:hidden;padding-bottom:.08em;width:100%}
.cc-about-hero__in{display:flex;justify-content:space-between;align-items:baseline;width:100%}
.cc-about-hero__in>.cc-swap{white-space:nowrap;display:inline-block}
.cc-js .cc-about-hero__in{transform:translate3d(0,115%,0);transition:transform .9s var(--ease-expo) var(--d,0s)}
.cc-js .cc-about-hero__title.is-in .cc-about-hero__in{transform:none}

/* Characters: desktop pinned horizontal scroll */
.cc-chars{position:relative;background:var(--amber);color:#000;height:100vh}
.cc-chars__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.cc-chars__track{display:flex;align-items:center;gap:240px;padding-left:80px;padding-right:80px;will-change:transform}
.cc-char{flex:0 0 auto;display:flex;align-items:center;gap:60px}
.cc-char__media{width:500px;height:600px;position:relative;flex:0 0 auto;overflow:hidden}
.cc-char__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.cc-char__text{width:500px;flex:0 0 auto;display:flex;flex-direction:column;gap:40px}
.cc-char__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:68px;line-height:.95;letter-spacing:-0.05em;text-transform:uppercase}
.cc-char__t1,.cc-char__t2{display:block}
.cc-char__t2{text-align:right}
.cc-char__body{display:flex;flex-direction:column;gap:12px}
.cc-char__body p{margin:0;font-family:var(--font-mono);font-weight:400;font-size:16px;line-height:1.2;text-align:justify}
.cc-char__pick{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px}
.cc-char__pick-l{font-family:var(--font-mono);font-weight:500;font-size:16px;letter-spacing:.04em;text-transform:uppercase}

/* CTA */
.cc-about-cta{min-height:100vh;background:var(--blue);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;gap:32px}
.cc-about-cta__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,8vw,100px);line-height:.92;letter-spacing:-0.04em;text-transform:uppercase}
.cc-about-cta__title>span{display:block}
.cc-about-cta__sub{display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-weight:400;font-size:20px;line-height:1.4}
.cc-about-cta__sub p{margin:0}.cc-about-cta__sub a{color:inherit}
.cc-char__body ul,.cc-char__body ol{margin:0;padding-left:1.2em}
.cc-about-cta__kicker{font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-0.02em;text-transform:uppercase}
.cc-about-cta__btn{margin-top:8px}

@media (max-width:768px){
  .cc-about-hero{margin-top:-64px;padding:24px 16px}
  .cc-about-hero__title{max-width:100%;font-size:clamp(32px,12vw,96px)}
  .cc-chars{height:auto !important;padding:72px 16px 88px}
  .cc-chars__stage{position:static;height:auto;overflow:visible;display:block}
  .cc-chars__track{flex-direction:column;align-items:stretch;gap:72px;padding:0;transform:none !important}
  .cc-char{flex-direction:column;align-items:stretch;gap:20px}
  .cc-js .cc-char{transform:translate3d(0,40px,0);transition:transform .7s var(--ease-expo)}
  .cc-js .cc-char.is-in{transform:none}
  .cc-char__media{width:100%;height:auto;aspect-ratio:5/6}
  .cc-char__text{width:100%}
  .cc-char__title{font-size:clamp(32px,9vw,60px)}
  .cc-char__body p{font-size:14px}
  .cc-about-cta{padding:80px 16px;gap:24px}
  .cc-about-cta__title{font-size:clamp(32px,11vw,60px)}
  .cc-about-cta__sub{font-size:16px}
  .cc-about-cta__kicker{font-size:clamp(20px,6vw,28px)}
}
@media (prefers-reduced-motion:reduce){
  .cc-js .cc-about-hero__in,.cc-js .cc-char{transform:none !important;transition:none !important}
}