/* Editorial brand story: shared pink palette, light surfaces and spacious type. */
.site-main:has(> .about-page) { max-width: none; padding-inline: 0; }
.about-page { --about-section-space: 96px; font-family: var(--font-inter); }
.about-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--page-gutter); }
.about-page h1, .about-page h2, .about-page h3 { font-family: var(--font-manrope); font-weight: 600; }
.about-heading--slanted { font-style: normal; transform: skewX(-10deg); transform-origin: left bottom; }
span.about-heading--slanted { display: inline-block; }
.about-reveal { opacity: 0; translate: 0 24px; transition: none; }
.about-reveal.is-revealed { opacity: 1; translate: none; transition: opacity 800ms cubic-bezier(.22, 1, .36, 1) var(--about-reveal-delay, 0ms), translate 800ms cubic-bezier(.22, 1, .36, 1) var(--about-reveal-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
    .about-reveal, .about-reveal.is-revealed { opacity: 1; translate: none; transition: none; }
}
@media print {
    .about-reveal, .about-reveal.is-revealed { opacity: 1; translate: none; transition: none; }
}
.about-intro { --cat-size: 128px; position: relative; padding-block: 88px 96px; }
.about-intro h1 { max-width: 1160px; margin: 0; font-size: clamp(44px, 6.1vw, 88px); line-height: 1.15; letter-spacing: -.055em; }
.about-intro h1 > span { display: block; color: var(--color-primary); }
.about-intro h1 > .about-title__lead { position: relative; display: table; max-width: calc(100% - var(--cat-size) - 12px); color: inherit; }
.about-cat { position: absolute; left: calc(100% + 12px); bottom: .05em; z-index: 1; display: block; width: var(--cat-size); aspect-ratio: 8 / 9; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; line-height: 0; transform: translate3d(var(--cat-x, 0px), var(--cat-y, 0px), 0); -webkit-tap-highlight-color: transparent; }
.about-cat:disabled { cursor: default; }
.about-cat:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; }
.about-cat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-cat.is-following { position: fixed; left: 0; top: 0; bottom: auto; z-index: 19; pointer-events: none; }
.about-cat[hidden] { display: none; }
.about-cat__back-tail { display: none; }
.about-cat[data-cat-direction="up"] .about-cat__face--front { display: none; }
.about-cat[data-cat-direction="up"] .about-cat__back-tail { display: inline; }
.about-cat__body { transform-box: fill-box; transform-origin: center; transition: transform 160ms ease; }
.about-cat__leg-placement { transition: transform 140ms ease; }
.about-cat[data-cat-direction="right"] .about-cat__body { transform: translate(-12px, 1px) rotate(-5deg); }
.about-cat[data-cat-direction="left"] .about-cat__body { transform: translate(12px, 1px) rotate(5deg); }
.about-cat[data-cat-direction="up"] .about-cat__body { transform: translateY(6px) scale(.98, 1.04); }
.about-cat[data-cat-direction="right"] .about-cat__leg-placement--back-left { transform: translate(6px, 12px); }
.about-cat[data-cat-direction="right"] .about-cat__leg-placement--back-right { transform: translate(-126px, 6px); }
.about-cat[data-cat-direction="right"] .about-cat__leg-placement--front-left { transform: translate(84px, -6px); }
.about-cat[data-cat-direction="right"] .about-cat__leg-placement--front-right { transform: translate(24px, 0); }
.about-cat[data-cat-direction="left"] .about-cat__leg-placement--back-left { transform: translate(134px, 12px); }
.about-cat[data-cat-direction="left"] .about-cat__leg-placement--back-right { transform: translate(-22px, 6px); }
.about-cat[data-cat-direction="left"] .about-cat__leg-placement--front-left { transform: translate(-8px, -6px); }
.about-cat[data-cat-direction="left"] .about-cat__leg-placement--front-right { transform: translate(-102px, 0); }
.about-cat[data-cat-direction="left"] .about-cat__tail-position { transform: translateX(240px) scaleX(-1); }
.about-cat__head-position { transform: translate(-8px, 42px) scale(1.06); transition: transform 260ms ease; }
.about-cat__run-pose { opacity: 0; transition: opacity 180ms ease; }
.about-cat__rest-pose { opacity: 1; transition: opacity 180ms ease; }
.about-cat:is([data-cat-state="running"], [data-cat-state="jumping"]) .about-cat__head-position { transform: translate(-4px, 18px) scale(1.03); }
.about-cat[data-cat-direction="right"] .about-cat__head-position { transform: translate(10px, 18px) scale(1.03); }
.about-cat[data-cat-direction="left"] .about-cat__head-position { transform: translate(-18px, 18px) scale(1.03); }
.about-cat[data-cat-direction="up"] .about-cat__head-position { transform: translate(-4px, 10px) scale(1.03); }
.about-cat[data-cat-direction="up"] .about-cat__tail { display: none; }
.about-cat:is([data-cat-state="running"], [data-cat-state="jumping"]) .about-cat__run-pose { opacity: 1; }
.about-cat:is([data-cat-state="running"], [data-cat-state="jumping"]) .about-cat__rest-pose { opacity: 0; }
.about-cat__motion { transform-box: view-box; transform-origin: 120px 250px; }
.about-cat[data-cat-state="running"] .about-cat__motion { animation: about-cat-run 280ms ease-in-out infinite; }
.about-cat__shadow { transform-box: fill-box; transform-origin: center; }
.about-cat[data-cat-state="running"] .about-cat__shadow { animation: about-cat-shadow 280ms ease-in-out infinite; }
.about-cat__leg { transform-box: fill-box; transform-origin: center; }
.about-cat__leg--back-left { --leg-phase: -140ms; }
.about-cat__leg--back-right { --leg-phase: -140ms; }
.about-cat__leg--front-left { --leg-phase: 0ms; }
.about-cat__leg--front-right { --leg-phase: 0ms; }
.about-cat[data-cat-state="running"] .about-cat__leg { animation: about-cat-stride 280ms ease-in-out var(--leg-phase) infinite; }
.about-cat__head { transform-box: fill-box; transform-origin: 50% 85%; transform: rotate(var(--cat-head-turn, 0deg)); transition: transform 180ms ease-out; }
.about-cat__face { transform: translate(var(--cat-look-x, 0px), var(--cat-look-y, 0px)); transition: transform 180ms ease-out; }
.about-cat__tail { transform-box: fill-box; transform-origin: 100% 65%; }
.about-cat[data-cat-state="jumping"] .about-cat__tail { animation: about-cat-tail 720ms ease-in-out; }
@keyframes about-cat-run {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    12% { transform: translateY(1px) scale(1.035, .965); }
    48% { transform: translateY(-7px) scale(.985, 1.015); }
    78% { transform: translateY(-2px) scale(1, 1); }
}
@keyframes about-cat-stride {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    45% { transform: translate(3px, -9px) rotate(5deg); }
    75% { transform: translate(-3px, -4px) rotate(-3deg); }
}
@keyframes about-cat-shadow { 0%, 100% { transform: scaleX(1); opacity: .2; } 48% { transform: scaleX(.8); opacity: .12; } }
@keyframes about-cat-tail { 25% { transform: rotate(-22deg); } 70% { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) {
    .about-cat__head, .about-cat__face, .about-cat__head-position, .about-cat__run-pose, .about-cat__rest-pose, .about-cat__body, .about-cat__leg-placement { transition: none; }
    .about-cat *, .about-cat[data-cat-state="jumping"] .about-cat__tail { animation: none !important; }
}
.about-intro__description { max-width: 940px; margin: 32px 0 0; color: var(--color-text-secondary); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.85; }
.about-campaign { position: relative; display: grid; min-height: clamp(360px, 44vw, 640px); background: #e8f4ff; }
.about-campaign > .about-media { position: absolute; inset: 0; height: 100%; min-height: 0; }
.about-campaign .about-media > img { position: absolute; inset: 0; object-position: left top; }
/* Keep the portrait left-anchored and the copy over the photo's empty sky. */
.about-campaign .about-media > .about-media__sky { object-position: right top; }
.about-campaign .about-media__image { -webkit-mask-image: linear-gradient(to right, #000 47%, transparent 50%); mask-image: linear-gradient(to right, #000 47%, transparent 50%); }
.about-campaign__story { position: relative; grid-area: 1 / 1; align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 40px; }
.about-campaign__story > .about-copy { grid-column: 2; width: 100%; max-width: none; margin: 0; padding-left: clamp(32px, 3.333vw, 64px); }
.about-campaign__story .ui-eyebrow { margin: 0 0 16px; color: var(--color-text-inverse); font: 600 13px/1.5 var(--font-manrope); text-shadow: 0 1px 4px rgb(30 55 80 / 35%); }
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.about-split > .ui-eyebrow { margin-top: 10px; }
.about-copy { min-width: 0; }
.about-copy h2 { margin: 0 0 28px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; letter-spacing: -.035em; }
.about-copy h2 span { color: var(--color-primary); }
.about-copy p { max-width: 760px; margin: 0 0 20px; color: var(--color-text-secondary); font-size: 17px; line-height: 1.9; }
.about-copy p:last-child { margin-bottom: 0; }
.about-technology { padding-block: var(--about-section-space); background: var(--color-surface-brand); }
.about-technology__heading { margin-bottom: 64px; }
.about-technology__grid, .about-highlights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.about-technology__item { min-width: 0; }
.about-index { display: block; margin-bottom: 20px; color: var(--color-primary); font: 500 40px/1.2 var(--font-manrope); letter-spacing: -.05em; }
.about-technology__item h3 { margin: 0 0 12px; font-size: 25px; line-height: 1.4; letter-spacing: -.025em; }
.about-technology__item .about-technology__name { margin: 0 0 16px; color: var(--color-text-accent); font-weight: 600; font-size: 13px; }
.about-technology__item > p:last-child, .about-highlights__grid article > p:last-child { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.9; }
.about-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-gallery__item { position: relative; min-width: 0; margin: 0; }
.about-gallery__item::after { content: ''; position: absolute; inset: auto 0 0; height: max(140px, 44%); background: linear-gradient(to top, rgb(18 32 46 / 22%), rgb(18 32 46 / 12%) 38%, transparent); pointer-events: none; }
.about-gallery__item figcaption { position: absolute; z-index: 1; inset: auto 24px 24px; color: var(--color-text-inverse); font: italic 600 22px/1.5 var(--font-display); text-shadow: 0 1px 5px rgb(0 0 0 / 18%); }
.about-highlights { padding-block: var(--about-section-space); }
.about-highlights > h2 { margin: 0 0 48px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; }
.about-highlights__value { margin: 0 0 24px; color: var(--color-primary); font: 500 clamp(32px, 4.2vw, 60px)/1.2 var(--font-manrope); font-variant-numeric: tabular-nums; letter-spacing: -.05em; white-space: nowrap; }
.about-counter__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-about-counter] { display: inline-flex; vertical-align: top; line-height: 1.4; white-space: pre; }
.about-counter__slot { display: inline-grid; overflow: hidden; }
.about-counter__number { display: inline-flex; }
.about-counter__digit { width: 1ch; text-align: right; }
.about-counter__layer { grid-area: 1 / 1; }
.about-counter__word { display: flex; }
.about-counter__word > span { display: inline-block; }
.about-highlights__grid h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.5; }
.about-direction { padding-block: var(--about-section-space); background: linear-gradient(rgb(255 255 255 / 25%), rgb(255 255 255 / 25%)), url('../images/about-page/about-5.png') center / cover no-repeat var(--color-surface-selected); }
.about-direction__actions { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.about-direction__actions .ui-button { padding-inline: 0; }
/* Decorative lens artwork is replaced by images through config/about.php. */
.about-media { position: relative; overflow: hidden; min-width: 0; background: var(--color-surface-brand); }
.about-media--campaign { height: clamp(360px, 44vw, 640px); }
.about-media:not(.about-media--campaign) { aspect-ratio: 1; }
.about-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-media__art { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(130deg, #fff5f7, #f2c4ce); }
.about-media__lens { position: absolute; width: 54%; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 85%); border-radius: 50% 50% 48% 48% / 44% 44% 56% 56%; background: radial-gradient(ellipse at 35% 25%, rgb(255 255 255 / 65%), rgb(255 255 255 / 10%) 55%, rgb(234 147 156 / 18%) 80%); box-shadow: inset 0 -16px 40px rgb(234 147 156 / 18%), 0 20px 50px rgb(150 81 90 / 10%); transform: rotate(-24deg) translate(-26%, -10%); }
.about-media__lens--second { transform: rotate(20deg) translate(32%, 16%); }
.about-media--campaign .about-media__lens { width: min(42%, 520px); }
.about-media--tile-1 .about-media__art { background: linear-gradient(145deg, #fff5f7, #ebbac4); }
.about-media--tile-2 .about-media__art { background: linear-gradient(145deg, #fcf8f4, #e9d8ce); }
.about-media--tile-3 .about-media__art { background: linear-gradient(145deg, #f6f7ff, #dfdfed); }
@media (width < 1200px) {
    .about-page { --about-section-space: 72px; }
    .about-intro { --cat-size: 108px; padding-block: 64px 72px; }
    .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; }
    .about-campaign__story { padding-block: 28px; }
    .about-campaign__story p:not(.ui-eyebrow) { font-size: 15px; line-height: 1.75; }
    .about-technology__grid, .about-highlights__grid { gap: 28px; }
    .about-highlights__value { font-size: clamp(28px, 4vw, 48px); }
    .about-gallery__item figcaption { inset: auto 20px 20px; font-size: 20px; }
}
@media (width < 768px) {
    .about-page { --about-section-space: 48px; }
    .about-intro { --cat-size: 76px; padding-block: 40px 48px; }
    .about-intro h1 { font-size: clamp(38px, 10vw, 60px); }
    .about-intro__description { margin-top: 24px; font-size: 15px; }
    .about-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .about-split > .ui-eyebrow { margin: 0; }
    .about-copy h2 { margin-bottom: 20px; font-size: 30px; }
    .about-copy p { font-size: 15px; }
    .about-campaign { display: block; min-height: 0; background: transparent; }
    .about-campaign > .about-media { position: relative; inset: auto; height: clamp(240px, 64vw, 420px); }
    .about-campaign .about-media__sky { display: none; }
    .about-campaign .about-media__image { -webkit-mask-image: none; mask-image: none; }
    .about-campaign__story { display: block; padding-block: 32px 40px; }
    .about-campaign__story > .about-copy { width: 100%; max-width: none; padding-left: 0; }
    .about-campaign__story .ui-eyebrow { margin-bottom: 10px; color: var(--color-primary); font-size: 12px; text-shadow: none; }
    .about-campaign__story h2 { margin-bottom: 14px; }
    .about-campaign__story p:not(.ui-eyebrow) { margin-bottom: 12px; font-size: 14px; line-height: 1.65; }
    .about-campaign__story p:last-child { margin-bottom: 0; }
    .about-technology__heading { margin-bottom: 40px; }
    .about-technology__grid, .about-highlights__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .about-index { margin-bottom: 12px; font-size: 32px; }
    .about-technology__item h3 { font-size: 24px; }
    .about-gallery { grid-template-columns: minmax(0, 1fr); }
    .about-media:not(.about-media--campaign) { aspect-ratio: 4 / 3; }
    .about-media--campaign { height: 360px; }
    .about-media--campaign .about-media__lens { width: 72%; }
    .about-highlights > h2 { margin-bottom: 32px; }
    .about-highlights__value { margin-bottom: 12px; font-size: 44px; }
    .about-highlights__grid h3 { margin-bottom: 12px; }
    .about-direction__actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}