/* About page (/about-us/) — layout and motion.
   Hidden "before" states only apply once about.js adds html.alo-anim,
   so the page reads fine with JS off or reduced motion on. */

.about { overflow-x: clip; }
.about h2 { text-wrap: balance; }
.about p { text-wrap: pretty; }

/* ---------- Hero ---------- */
.about-hero {
	position: relative;
	isolation: isolate;
	min-height: min(88dvh, 780px);
	display: flex;
	align-items: flex-end;
	padding: clamp(96px, 14vh, 160px) 0 clamp(64px, 10vh, 112px);
	background: var(--c-navy);
	color: #fff;
	overflow: hidden;
}
.about-hero__media { position: absolute; inset: 0; z-index: -2; }
.about-hero__media img {
	width: 100%; height: 100%; object-fit: cover;
	transform-origin: 60% 40%;
	animation: about-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
.about-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 80% at 85% 10%, rgba(200,16,46,.28), transparent 60%),
		linear-gradient(180deg, rgba(11,31,77,.45) 0%, rgba(11,31,77,.78) 55%, rgba(8,20,52,.96) 100%);
}
.about-hero::after { /* soft grain */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.about-hero__inner { position: relative; width: 100%; }
.about-hero .breadcrumbs, .about-hero .breadcrumbs a { color: rgba(255,255,255,.75); }
.about-hero .breadcrumbs span { color: #fff; }
.about-hero__eyebrow {
	display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
	margin: var(--s-4, 1rem) 0 var(--s-3, .75rem);
	font-size: var(--fs-xs, .8rem); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
	color: var(--c-gold);
}
.about-onair {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .35rem .75rem .35rem .6rem; border-radius: 999px;
	background: rgba(200,16,46,.18); border: 1px solid rgba(255,255,255,.18);
	color: #fff; backdrop-filter: blur(6px);
}
.about-onair__dot {
	position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red);
}
.about-onair__dot::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-red);
	animation: about-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.about-hero__title {
	max-width: 15ch;
	margin: 0 0 var(--s-5, 1.5rem);
	font-family: var(--f-display); font-weight: 600;
	font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.025em;
	color: #fff; text-wrap: balance;
}
.about-hero__lede { max-width: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 .5rem; }
.about-hero__kreyol { font-family: var(--f-display); font-style: italic; color: var(--c-gold); margin: 0 0 var(--s-6, 2rem); }
.about-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.about-hero__ctas .btn { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.about-hero__ctas .btn:hover { transform: translateY(-2px); }
.about-hero__ctas .btn:active { transform: translateY(1px) scale(.98); }
.about-hero__cue {
	position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
	width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255,255,255,.6);
}
.about-hero__cue span {
	position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff;
	animation: about-cue 1.8s var(--ease) infinite;
}

/* word split for the title */
.about-split { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.about-split > span { display: inline-block; }
.alo-anim .about-split > span {
	transform: translateY(105%) rotate(4deg); opacity: 0;
	transition: transform .9s var(--ease), opacity .9s var(--ease);
	transition-delay: var(--d, 0s);
}
.alo-anim .is-split .about-split > span { transform: none; opacity: 1; }

/* ---------- Marquee ---------- */
.about-marquee {
	position: relative; overflow: hidden;
	background: var(--c-gold); color: var(--c-navy);
	border-block: 1px solid rgba(11,31,77,.12);
	transform: rotate(-1.2deg) scale(1.02); margin: -14px 0 0; z-index: 2;
	box-shadow: 0 12px 30px -18px rgba(11,31,77,.55);
}
.about-marquee__track { display: flex; width: max-content; animation: about-marquee 38s linear infinite; }
.about-marquee:hover .about-marquee__track { animation-play-state: paused; }
.about-marquee ul { display: flex; margin: 0; padding: 0; list-style: none; }
.about-marquee li {
	display: flex; align-items: center; gap: 1.5rem; padding: .9rem 0 .9rem 1.5rem;
	font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); white-space: nowrap;
}
.about-marquee li::after { content: "✦"; font-size: .7em; color: var(--c-red); }

/* ---------- Story ---------- */
.about-story { padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 9vw, 110px); background: var(--c-sand); }
.about-story__text {
	max-width: 24ch; margin: var(--s-3, .75rem) 0 0;
	font-family: var(--f-display); font-weight: 500;
	font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1.12; letter-spacing: -.015em;
	color: var(--c-navy);
}
.about-word { transition: opacity .35s linear, color .35s linear; }
.alo-anim .about-word { opacity: .2; }
.alo-anim .about-word.is-lit { opacity: 1; }

/* ---------- Stats ---------- */
.about-stats { background: var(--c-sand); padding: 0 0 clamp(64px, 9vw, 110px); }
.about-stats__list {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0;
	margin: 0; padding: 0; list-style: none;
	border-top: 1px solid rgba(11,31,77,.14);
}
.about-stats__list li { padding: var(--s-6, 2rem) var(--s-5, 1.5rem) 0 0; display: grid; gap: .4rem; }
.about-stats__num {
	font-family: var(--f-display); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1;
	letter-spacing: -.03em; color: var(--c-red); font-variant-numeric: tabular-nums;
}
.about-stats__label { max-width: 22ch; color: var(--c-ink); opacity: .75; }

/* ---------- Bento ---------- */
.about-offers { padding: clamp(72px, 10vw, 130px) 0; background: #fff; }
.about-offers__head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: var(--s-7, 2.5rem); }
.about-offers__head h2 { margin: 0; font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; color: var(--c-navy); }
.about-bento {
	display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(200px, auto);
}
.about-bento__item { display: flex; }
.about-bento__item--0 { grid-column: span 2; grid-row: span 2; }
.about-bento__item--1 { grid-column: span 2; }
.about-bento__item--2 { grid-column: span 1; }
.about-bento__item--3 { grid-column: span 1; }
.about-bento__item--4 { grid-column: span 2; }
.about-bento__item--5 { grid-column: span 1; }
.about-bento__item--6 { grid-column: span 1; }
.about-tile {
	--mx: 50%; --my: 50%;
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
	width: 100%; min-height: 200px; padding: 22px;
	border-radius: var(--radius-lg, 20px);
	background: var(--c-navy); color: #fff; text-decoration: none;
	box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -28px rgba(11,31,77,.7);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.about-tile__img {
	position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.1s var(--ease), filter .6s var(--ease);
	filter: saturate(.9);
}
.about-tile::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(11,31,77,.1) 0%, rgba(11,31,77,.55) 45%, rgba(8,20,52,.93) 100%);
}
.about-tile::after { /* cursor spotlight */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(233,180,76,.32), transparent 55%);
	transition: opacity .35s var(--ease);
}
.about-tile:hover, .about-tile:focus-visible, .about-tile:visited { color: #fff; }
.about-tile:hover, .about-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 28px 50px -26px rgba(11,31,77,.85); }
.about-tile:hover::after, .about-tile:focus-visible::after { opacity: 1; }
.about-tile:hover .about-tile__img, .about-tile:focus-visible .about-tile__img { transform: scale(1.07); filter: saturate(1.1); }
.about-tile:active { transform: translateY(-1px) scale(.99); }
.about-tile:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.about-tile__icon {
	position: absolute; top: 18px; left: 18px;
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
	transition: transform .5s var(--ease), background-color .3s;
}
.about-tile__icon svg { width: 22px; height: 22px; }
.about-tile:hover .about-tile__icon { transform: rotate(-8deg) scale(1.08); background: var(--c-red); }
.about-tile__body { display: grid; gap: .35rem; padding-right: 44px; }
.about-tile__title { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; }
.about-bento__item--0 .about-tile__title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.about-tile__text { font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 40ch; }
.about-tile__go {
	position: absolute; right: 18px; bottom: 20px;
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: #fff; color: var(--c-navy);
	transform: translateX(-6px); opacity: .85;
	transition: transform .4s var(--ease), opacity .4s, background-color .3s, color .3s;
}
.about-tile__go svg { width: 18px; height: 18px; }
.about-tile:hover .about-tile__go { transform: translateX(0); opacity: 1; background: var(--c-gold); }

/* ---------- Everywhere ---------- */
.about-everywhere { padding: clamp(72px, 10vw, 130px) 0; background: var(--c-sand); }
.about-everywhere__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about-everywhere h2 { margin: 0 0 1rem; font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em; color: var(--c-navy); }
.about-everywhere__lede { max-width: 52ch; color: var(--c-ink); opacity: .85; line-height: 1.6; }
.about-everywhere__apps { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.about-everywhere__apps .btn { background: var(--c-navy); color: #fff; }
.about-everywhere__apps .btn:hover { background: var(--c-red); transform: translateY(-2px); }
.about-devices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.about-devices li {
	display: flex; align-items: center; gap: .75rem;
	padding: 18px 20px; border-radius: 16px; background: #fff;
	color: var(--c-navy); font-weight: 600;
	box-shadow: 0 10px 30px -22px rgba(11,31,77,.6);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.about-devices li:nth-child(even) { translate: 0 18px; }
.about-devices li:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(11,31,77,.7); }
.about-devices svg { flex: none; width: 22px; height: 22px; color: var(--c-red); }

/* ---------- Own words ---------- */
.about-words { padding: 0 0 clamp(64px, 8vw, 100px); background: var(--c-sand); }
.about-words__details { border-top: 1px solid rgba(11,31,77,.14); padding-top: 1.25rem; }
.about-words__details summary { cursor: pointer; font-family: var(--f-display); font-size: 1.25rem; color: var(--c-navy); }
.about-words__details[open] summary { margin-bottom: 1rem; }

/* ---------- CTA ---------- */
.about-cta {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(90px, 12vw, 160px) 0 clamp(100px, 13vw, 170px);
	background: var(--c-navy); color: #fff;
}
.about-cta__media { position: absolute; inset: -8% 0; z-index: -2; }
.about-cta__media img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.08); will-change: transform; }
.about-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(90% 90% at 15% 100%, rgba(200,16,46,.35), transparent 60%), linear-gradient(180deg, rgba(11,31,77,.82), rgba(8,20,52,.94));
}
.about-cta__inner { max-width: 820px; }
.about-cta h2 { margin: 0 0 1rem; font-family: var(--f-display); font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.about-cta__inner > p { max-width: 58ch; color: rgba(255,255,255,.85); line-height: 1.6; }
.about-cta__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 2rem 0; padding: 0; list-style: none; }
.about-cta__chips a {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.1rem; border-radius: 999px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); color: #fff; text-decoration: none; font-weight: 600;
	backdrop-filter: blur(8px);
	transition: background-color .25s, border-color .25s, transform .25s var(--ease), color .25s;
}
.about-cta__chips a:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy); transform: translateY(-2px); }
.about-cta__chips a:active { transform: translateY(0) scale(.98); }
.about-cta__chips svg { width: 18px; height: 18px; }
.about-cta__links { display: flex; flex-wrap: wrap; gap: .75rem; color: rgba(255,255,255,.6); }
.about-cta__links a { color: #fff; text-underline-offset: 4px; }

/* ---------- Reveal ---------- */
.alo-anim [data-reveal] {
	opacity: 0; transform: translateY(26px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: var(--d, 0s);
}
.alo-anim [data-reveal="pop"] { transform: translateY(14px) scale(.9); }
.alo-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes about-kenburns { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.16) translate3d(-2%, -1.5%, 0); } }
@keyframes about-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes about-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes about-marquee { to { transform: translateX(-50%); } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.about-bento { grid-template-columns: repeat(2, 1fr); }
	.about-bento__item--0 { grid-column: span 2; grid-row: span 1; min-height: 300px; }
	.about-bento__item--1, .about-bento__item--4 { grid-column: span 2; }
	.about-everywhere__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.about-hero { min-height: 82dvh; }
	.about-hero__cue { display: none; }
	.about-bento { grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); }
	.about-bento__item--0, .about-bento__item--1, .about-bento__item--4 { grid-column: auto; }
	.about-stats__list { grid-template-columns: 1fr 1fr; }
	.about-stats__list li { padding-right: 1rem; }
	.about-devices li:nth-child(even) { translate: none; }
	.about-devices li { padding: 14px 16px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
	.about-hero__media img, .about-marquee__track, .about-onair__dot::after, .about-hero__cue span { animation: none !important; }
	.about-cta__media img { transform: scale(1.04); }
}