.about-page { background: var(--cream); }
.about-page .site-header:not(.is-fixed) { color: var(--ink); border-bottom-color: rgba(12,15,38,.14); background: rgba(255,248,235,.88); backdrop-filter: blur(12px); }
.about-hero { position: relative; min-height: 740px; color: var(--ink); background: var(--cream); overflow: hidden; isolation: isolate; }
.about-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(rgba(12,15,38,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,15,38,.05) 1px,transparent 1px),radial-gradient(circle at 82% 68%,rgba(255,185,54,.3),transparent 24%),var(--cream); background-size: 76px 76px,76px 76px,auto,auto; }
.about-hero::after { content: ""; position: absolute; z-index: -2; inset: 0 auto 0 0; width: 43%; background: linear-gradient(145deg,var(--orange),#b72c09); clip-path: polygon(0 0,78% 0,100% 100%,0 100%); }
.about-hero__word { position: absolute; z-index: -1; right: -10px; bottom: -58px; color: transparent; -webkit-text-stroke: 2px rgba(12,15,38,.065); font-family: var(--display); font-size: clamp(250px,29vw,460px); line-height: .75; pointer-events: none; }
.about-hero__grid { min-height: 740px; padding-top: 108px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 75px; }
.about-hero__copy { position: relative; z-index: 5; padding-block: 66px 68px; }
.about-hero .hero__eyebrow { color: var(--orange); }
.about-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(82px,7.2vw,112px); font-weight: 400; line-height: .84; letter-spacing: -.018em; text-transform: uppercase; }
.about-hero h1 span { display: block; opacity: 0; transform: translateY(55px); animation: slide-up .8s cubic-bezier(.2,.8,.2,1) forwards; }
.about-hero h1 span:nth-child(1) { animation-delay: .3s; }
.about-hero h1 span:nth-child(2) { animation-delay: .42s; }
.about-hero h1 em { color: var(--orange); font-style: normal; }
.about-hero__copy > p:not(.eyebrow) { max-width: 540px; margin: 24px 0 0; color: #51545b; font-weight: 500; opacity: 0; animation: slide-up .7s .57s forwards; }
.about-hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 31px; opacity: 0; animation: slide-up .7s .7s forwards; }
.about-hero__actions .text-link { color: var(--ink); }
.about-hero__visual { position: relative; min-height: 540px; opacity: 0; transform: translateX(-70px) rotate(-2deg); animation: about-visual-in 1s .32s cubic-bezier(.2,.8,.2,1) forwards; }
.about-hero__main { position: absolute; inset: 38px 92px 22px 4px; overflow: hidden; border: 9px solid #fff; background: #fff; box-shadow: 0 28px 58px rgba(80,22,5,.32); transform: rotate(-2deg); }
.about-hero__main img, .about-hero__small img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.about-hero__main:hover img, .about-hero__small:hover img { transform: scale(1.06); }
.about-hero__small { position: absolute; z-index: 3; right: 0; top: 10px; width: 210px; height: 185px; overflow: hidden; border: 8px solid #fff; box-shadow: 0 22px 42px rgba(80,22,5,.28); transform: rotate(5deg); }
.about-hero__year { position: absolute; z-index: 4; right: 8px; bottom: 5px; width: 145px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); border: 7px solid var(--orange); border-radius: 50%; background: var(--gold); text-align: center; box-shadow: 0 16px 34px rgba(80,22,5,.25); transform: rotate(5deg); }
.about-hero__year strong { font-family: var(--display); font-size: 47px; font-weight: 400; line-height: .9; }
.about-hero__year span { font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.about-hero__line { position: absolute; z-index: 4; left: -18px; bottom: 4px; padding: 11px 17px; color: #fff; background: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transform: rotate(-3deg); }
.about-hero__line i { color: var(--gold); padding-inline: 6px; font-style: normal; }

.about-marquee { color: var(--ink); background: var(--gold); overflow: hidden; clip-path: polygon(0 10%,100% 0,100% 90%,0 100%); }
.about-marquee > div { width: max-content; display: flex; align-items: center; gap: 26px; padding: 17px 0 15px; font-family: var(--display); font-size: 29px; letter-spacing: .04em; text-transform: uppercase; animation: marquee 30s linear infinite; }
.about-marquee i { color: var(--orange); font-style: normal; }

.origin { position: relative; background: #fff; overflow: hidden; }
.origin::after { content: "2020"; position: absolute; right: -20px; bottom: -82px; color: rgba(12,15,38,.035); font-family: var(--display); font-size: 290px; line-height: 1; pointer-events: none; }
.origin__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(65px,8vw,120px); align-items: start; }
.origin__heading { position: sticky; top: 120px; }
.origin__heading h2 em { color: var(--orange); font-style: normal; }
.origin__heading > p:last-child { color: #555961; }
.origin__chapters { border-top: 1px solid rgba(12,15,38,.16); }
.origin__chapters article { display: grid; grid-template-columns: 48px 145px 1fr; align-items: start; gap: 18px; padding: 31px 0; border-bottom: 1px solid rgba(12,15,38,.16); }
.origin__chapters article > span { color: var(--orange); font-family: var(--display); font-size: 25px; }
.origin__chapters h3 { margin: 0; font-family: var(--display); font-size: 53px; font-weight: 400; line-height: .85; text-transform: uppercase; }
.origin__chapters p { margin: 0; color: #555961; }
.origin__closing { position: relative; z-index: 1; margin-top: 70px; padding: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; color: #fff; background: var(--ink); }
.origin__closing p { margin: 0; font-size: 17px; }

.mission { min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; background: var(--gold); overflow: hidden; }
.mission__image { position: relative; min-height: 690px; overflow: hidden; }
.mission__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(6,7,18,.65)); }
.mission__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.mission__image:hover img { transform: scale(1.045); }
.mission__image span { position: absolute; z-index: 2; left: 38px; bottom: 34px; color: #fff; font-family: var(--display); font-size: 31px; line-height: .95; letter-spacing: .04em; text-transform: uppercase; }
.mission__copy { align-self: center; padding: clamp(60px,7vw,105px); }
.mission__copy .eyebrow { color: var(--ink); }
.mission__copy h2 { font-size: clamp(62px,5.4vw,86px); }
.mission__copy h2 em { color: var(--orange); font-style: normal; }
.mission__copy p { font-weight: 500; }

.experience { position: relative; color: #fff; background: linear-gradient(145deg,#0c0f26,#261127); overflow: hidden; }
.experience::before { content: ""; position: absolute; inset: 0; opacity: .055; background: url('./assets-v4/texture.png') center/480px; }
.experience .shell { position: relative; }
.experience__heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 58px; }
.experience__heading > p { width: 35%; margin: 0 0 6px; color: rgba(255,255,255,.6); }
.experience__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(70px,9vw,140px); }
.experience__copy p { color: rgba(255,255,255,.66); }
.experience__copy .button { margin-top: 18px; }
.spice-wheel { position: relative; width: min(510px,100%); aspect-ratio: 1; margin-inline: auto; border: 1px dashed rgba(255,185,54,.45); border-radius: 50%; animation: slow-pulse 6s ease-in-out infinite; }
.spice-wheel::before, .spice-wheel::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.spice-wheel::after { inset: 27%; border-color: rgba(255,185,54,.32); }
.spice-wheel__center { position: absolute; z-index: 2; inset: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; background: var(--gold); text-align: center; }
.spice-wheel__center span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spice-wheel__center strong { font-family: var(--display); font-size: 28px; font-weight: 400; line-height: .9; text-transform: uppercase; }
.spice-wheel__item { position: absolute; z-index: 3; padding: 8px 12px; color: #fff; border: 1px solid rgba(255,255,255,.22); background: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spice-wheel__item--one { left: 34%; top: -3%; }
.spice-wheel__item--two { right: -2%; top: 35%; }
.spice-wheel__item--three { right: 11%; bottom: 9%; }
.spice-wheel__item--four { left: 5%; bottom: 16%; }
.spice-wheel__item--five { left: -4%; top: 30%; }

.reviews { background: var(--cream); }
.reviews__heading { max-width: 760px; margin-bottom: 46px; }
.reviews__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.review-card { position: relative; min-height: 270px; margin: 0; padding: 35px; border: 1px solid rgba(12,15,38,.14); background: #fff; overflow: hidden; transition: transform .3s,border .3s,box-shadow .3s; }
.review-card:hover { border-color: var(--orange); transform: translateY(-7px); box-shadow: 0 20px 40px rgba(12,15,38,.1); }
.review-card > span { position: absolute; right: 20px; top: -18px; color: rgba(236,61,8,.1); font-family: Georgia,serif; font-size: 140px; line-height: 1; }
.review-card > p { position: relative; z-index: 1; margin: 0; font-size: 17px; font-weight: 500; }
.review-card footer { position: absolute; left: 35px; bottom: 30px; display: flex; flex-direction: column; }
.review-card footer strong { font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.review-card footer small { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.about-cta { position: relative; padding: 92px 0; color: #fff; background: var(--ink-deep); overflow: hidden; }
.about-cta::before { content: ""; position: absolute; inset: 0; opacity: .22; background: linear-gradient(90deg,var(--ink-deep),rgba(6,7,18,.78)),url('./assets/about.png') center/cover; }
.about-cta__inner { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.about-cta h2 em { color: var(--gold); font-style: normal; }
.about-cta__actions { display: flex; align-items: center; gap: 28px; }
.about-cta__actions > a:last-child { display: flex; flex-direction: column; font-family: var(--display); font-size: 23px; line-height: 1; }
.about-cta__actions > a:last-child span { margin-bottom: 7px; color: var(--gold); font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

@keyframes about-visual-in { to { opacity: 1; transform: none; } }
@keyframes slow-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }

@media (max-width: 1050px) {
  .about-hero__grid { gap: 45px; }
  .about-hero__main { right: 65px; }
  .about-hero__small { width: 180px; height: 155px; }
}
@media (max-width: 900px) {
  .about-hero { min-height: 1100px; }
  .about-hero::after { width: 100%; height: 48%; top: auto; clip-path: polygon(0 12%,100% 0,100% 100%,0 100%); }
  .about-hero__grid { min-height: 1100px; padding-top: 86px; grid-template-columns: 1fr; gap: 10px; }
  .about-hero__copy { grid-row: 1; padding: 66px 0 8px; }
  .about-hero h1 { font-size: clamp(78px,13vw,105px); }
  .about-hero__visual { grid-row: 2; width: min(650px,100%); min-height: 510px; margin-inline: auto; }
  .about-hero__word { bottom: 38%; }
  .origin__grid { grid-template-columns: 1fr; gap: 45px; }
  .origin__heading { position: static; }
  .mission { grid-template-columns: 1fr; }
  .mission__image { min-height: 570px; }
  .mission__copy { padding: 90px max(24px,calc((100vw - 760px)/2)); }
  .experience__heading { align-items: start; flex-direction: column; gap: 18px; }
  .experience__heading > p { width: 70%; }
  .experience__grid { grid-template-columns: 1fr; }
  .spice-wheel { margin-top: 30px; }
  .about-cta__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .about-page.nav-open .nav-toggle { color: #fff; }
  .about-hero { min-height: 970px; }
  .about-hero::after { height: 40%; }
  .about-hero__grid { min-height: 970px; }
  .about-hero__copy { padding-top: 55px; }
  .about-hero h1 { font-size: clamp(66px,18vw,86px); }
  .about-hero__copy > p:not(.eyebrow) { font-size: 15px; }
  .about-hero__actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .about-hero__visual { min-height: 385px; }
  .about-hero__main { inset: 35px 50px 20px 0; border-width: 6px; }
  .about-hero__small { width: 130px; height: 112px; border-width: 5px; }
  .about-hero__year { right: 0; width: 105px; border-width: 5px; }
  .about-hero__year strong { font-size: 39px; }
  .about-hero__line { left: 0; }
  .about-marquee > div { font-size: 26px; }
  .origin::after { font-size: 160px; bottom: -35px; }
  .origin__chapters article { grid-template-columns: 38px 1fr; gap: 12px; }
  .origin__chapters h3 { font-size: 45px; }
  .origin__chapters p { grid-column: 2; }
  .origin__closing { grid-template-columns: 1fr; gap: 22px; margin-top: 45px; padding: 28px; }
  .mission__image { min-height: 420px; }
  .mission__copy { padding-block: 75px; }
  .experience__heading > p { width: 100%; }
  .spice-wheel { width: 330px; max-width: 100%; }
  .spice-wheel__center strong { font-size: 21px; }
  .spice-wheel__item { padding: 6px 8px; font-size: 8px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .review-card { min-height: 300px; padding: 28px; }
  .review-card footer { left: 28px; bottom: 26px; }
  .about-cta__actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero h1 span, .about-hero__copy > p, .about-hero__actions, .about-hero__visual { opacity: 1; transform: none; animation: none !important; }
}