/* The supplied artwork keeps its original vector contours and photo crops. */
body:has(.page-about) { background:#f6f6f4; }
body:has(.page-about) .fractal-backdrop { display:none; }
body:has(.page-about) .site-header { background:#f6f6f4e8; border-bottom:1px solid #10121412; box-shadow:none; }
body:has(.page-about) .site-header::before, body:has(.page-about) .site-header::after { content:none; }
body:has(.page-about) .brand img { filter:brightness(0); }
body:has(.page-about) .desktop-nav a { color:#383a3e; }
body:has(.page-about) .desktop-nav a[aria-current], body:has(.page-about) .desktop-nav a:hover { color:#0456f5; }
body:has(.page-about) .desktop-nav a:last-child { color:#0456f5; border-color:#0456f5; background:transparent; box-shadow:none; }
body:has(.page-about) .menu-toggle { color:#121416; border-color:#12141640; background:#fff8; box-shadow:none; }
body:has(.page-about) .menu-toggle span { background:#121416; }
body:has(.page-about) .aiva-cursor { background:#fff; box-shadow:0 0 5px 2px #0456f5,0 0 16px #0456f5; }
#main .page-about { background:#f6f6f4; color:#121416; }
#main .about-editorial { --about-blue:#0456f5; position:relative; max-width:1800px; margin:0 auto; padding:72px 0 0; overflow:clip; }
#main .about-editorial :is(h1,h2,p,dl,dd) { margin:0; }
#main .about-editorial :is(h1,h2) { font-family:'Cal Sans','DM Sans',sans-serif; font-weight:400; letter-spacing:-.018em; line-height:1.07; }
#main .about-editorial p { font:400 clamp(14px,1.06vw,18px)/1.65 'DM Sans',sans-serif; color:#666b73; text-wrap:pretty; }
#main .about-editorial em { color:var(--about-blue); font-style:normal; }
#main .about-editorial p strong { color:#17253b; font-weight:500; }
#main .about-editorial .about-lead { color:#343b46; font-size:clamp(15px,1.23vw,21px); line-height:1.5; }
#main .about-copy p + p { margin-top:16px; }
#main .about-editorial .detail-back { left:4.8%; top:16px; min-height:32px; padding:0 12px; background:transparent; color:#4b4e54; border-color:#1c20252a; box-shadow:none; backdrop-filter:none; font-size:8px; }
#main .about-editorial .detail-back::before { content:none; }
#main .about-stage { position:relative; isolation:isolate; height:clamp(480px,43vw,774px); scroll-margin-top:75px; }
#main .about-visual { position:absolute; z-index:0; top:50%; left:17.5%; width:65%; transform:translateY(-50%); container-type:inline-size; }
#main .about-art { display:block; width:100%; max-width:none; height:auto; }
/* Position copy relative to the original artwork, inside its negative space. */
#main .about-center-copy { position:absolute; top:56%; left:35%; width:30%; text-align:center; }
#main .about-retail .about-center-copy { top:16%; }
#main .about-center-label { display:block; margin-bottom:12px; color:#6c788a; font:500 clamp(7px,1cqw,10px)/1.3 'DM Sans',sans-serif; letter-spacing:.16em; }
#main .about-editorial .about-center-copy p { color:#26354b; font:400 clamp(13px,3.35cqw,34px)/1.22 'Cal Sans',sans-serif; letter-spacing:-.015em; text-wrap:balance; }
#main .about-copy { position:absolute; z-index:1; width:21%; }
#main .about-left { left:4.8%; top:12%; }
#main .about-right { right:4.8%; top:30%; width:18%; }
#main .about-marker { display:flex; align-items:center; gap:12px; margin-bottom:29px; color:var(--about-blue); font:500 9px/1 'DM Sans',sans-serif; letter-spacing:.16em; }
#main .about-marker b { display:grid; place-items:center; width:27px; height:27px; flex:none; border:1px solid #0456f533; border-radius:50%; font-weight:500; letter-spacing:0; font-size:10px; }
#main .about-marker i { width:28px; height:1px; background:#0456f542; }
#main .about-marker > span { color:#66707e; font-size:8px; white-space:nowrap; }
#main .about-editorial h1 { font-size:clamp(54px,6.25vw,109px); line-height:.94; margin-bottom:30px; letter-spacing:-.055em; }
#main .about-editorial h1 > span:not(.about-word) { font-family:'Cal Sans',sans-serif; font-weight:400; letter-spacing:-.055em; color:var(--about-blue); }
#main .about-dot { color:#13243f; }
#main .about-left h2 { font-size:clamp(30px,2.9vw,50px); margin-bottom:25px; line-height:1.08; letter-spacing:-.035em; }
#main .about-heading-lead { display:block; font-size:1.6em; line-height:1; margin-bottom:10px; letter-spacing:-.045em; }
#main .about-heading-caption { display:block; font:400 .44em/1.4 'DM Sans',sans-serif; color:#606c7d; margin-bottom:12px; letter-spacing:.01em; }
#main .about-right h2 { font-size:clamp(20px,1.8vw,31px); line-height:1.2; letter-spacing:-.025em; }
#main .about-left p { max-width:255px; }
#main .about-rule { display:block; width:65px; height:2px; background:linear-gradient(90deg,var(--about-blue) 0 18px,#0456f529 18px); margin:24px 0; }
#main .about-scroll { position:absolute; z-index:2; bottom:20px; left:4.8%; display:flex; align-items:center; gap:18px; color:#60646b; font:500 8px/1.5 'DM Sans',sans-serif; letter-spacing:.15em; text-decoration:none; }
#main .about-scroll span:last-child { color:var(--about-blue); font-size:22px; }
#main .about-history .about-left { top:24%; }
#main .about-stats { position:absolute; top:24%; margin:0; }
#main .about-stats > div { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:21px 0; border-bottom:1px solid #0456f522; }
#main .about-stats > div::after { content:'↗'; position:absolute; right:0; top:26px; color:#0456f55c; font:400 20px/1 'DM Sans',sans-serif; }
#main .about-stats > div:first-child::after { top:5px; }
#main .about-stats > div:first-child { padding-top:0; }
#main .about-stats > div:last-child { border:0; }
#main .about-stats dt { color:var(--about-blue); font:400 clamp(38px,4.5vw,77px)/.95 'Cal Sans',sans-serif; letter-spacing:-.055em; }
#main .about-stats dd { color:#596779; font:500 clamp(11px,.8vw,14px)/1.4 'DM Sans',sans-serif; letter-spacing:.015em; }
#main .about-retail .about-left { top:14%; }
#main .about-retail .about-right { top:28%; }
#main .about-retail .about-left h2 { font-size:clamp(30px,2.9vw,50px); }
#main .about-brands .about-left { top:19%; }
#main .about-brands .about-right { top:25%; }
#main .about-world { margin-top:24px; margin-left:26%; color:#8994a6; }
#main .about-world svg { display:block; max-width:200px; width:100%; stroke:#a8b8d2; stroke-width:.7; }
#main .about-world circle { fill:var(--about-blue); stroke:none; }
#main .about-world span { display:block; margin-top:8px; color:#667180; font:500 8px/1.5 'DM Sans',sans-serif; letter-spacing:.13em; }
#main .about-closing { display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:7%; margin:35px 4.8% 0; padding:50px 0 70px; border-top:1px solid #0456f52b; }
#main .about-closing p { font-size:clamp(13px,1vw,17px); }
#main .about-closing .about-signoff { color:#202a3b; font:400 clamp(25px,2.4vw,42px)/1.1 'Cal Sans',sans-serif; letter-spacing:-.035em; }
#main .about-action { display:flex; align-items:center; justify-content:center; gap:20px; justify-self:end; padding:17px 22px; border:1px solid var(--about-blue); border-radius:100px; color:var(--about-blue); font:500 clamp(9px,.8vw,13px)/1.3 'DM Sans',sans-serif; text-decoration:none; transition:background .25s,color .25s,box-shadow .25s; }
#main .about-action span { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; background:#0456f50c; font-size:21px; transition:transform .25s; }
#main .about-action:hover span { transform:rotate(45deg); }
#main .about-action:hover { color:white; background:var(--about-blue); box-shadow:0 8px 24px #0456f51b; }
#main .about-motion .about-art { filter:blur(var(--about-blur,0px)); opacity:var(--about-opacity,1); }
#main .about-motion .about-entered { animation:about-copy-in .85s cubic-bezier(.22,.7,.3,1) backwards; }
#main .about-word { display:inline-block; }
#main .about-motion .about-word-reveal.about-entered { animation:none; }
#main .about-motion .about-word-reveal.about-entered .about-word { animation:about-word-in .8s cubic-bezier(.22,.7,.3,1) var(--word-delay,0ms) backwards; }
@keyframes about-word-in { from { opacity:0; filter:blur(8px); transform:translateY(.24em); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference) {
  #main .about-motion .about-visual { transform:translateY(-50%) translate(var(--art-x,0px),var(--art-y,0px)); transition:transform .65s cubic-bezier(.18,.7,.25,1); }
  #main .about-motion .about-visual::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle 190px at var(--shine-x,50%) var(--shine-y,50%),#f1f7ff4d,transparent 100%); mask-image:var(--art-mask); -webkit-mask-image:var(--art-mask); mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; transition:opacity .45s; }
  #main .about-pointer-active .about-visual::after { opacity:1; }
  #main .about-motion .about-rule { transform-origin:left; transition:transform .55s ease; }
  #main .about-pointer-active .about-rule { transform:scaleX(1.22); }
  #main .about-stats dt { transition:transform .35s,color .35s; }
  #main .about-stats > div:hover dt { transform:translateX(4px); color:#173b8b; }
}
@keyframes about-copy-in { from { opacity:0; filter:blur(7px); transform:translateY(12px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
body:has(.page-about) .site-footer { background:#eeeeec; color:#565a61; border-top:1px solid #1d242017; }
body:has(.page-about) .footer-logo img { filter:brightness(0); }
body:has(.page-about) .site-footer :is(p,a,.footer-bottom) { color:#565a61; }
@media (max-width:1000px) and (min-width:761px) {
  #main .about-stage { height:510px; }
  #main .about-marker { margin-bottom:24px; }
  #main .about-editorial p { font-size:13px; }
  #main .about-left h2 { font-size:26px; }
  #main .about-retail .about-left h2 { font-size:24px; }
  #main .about-stats dt { font-size:38px; }
  #main .about-stats > div { padding:16px 0; }
  #main .about-art { object-fit:contain; }
}
@media (max-width:760px) {
  #main .about-editorial { padding:78px 0 0; }
  #main .about-editorial .detail-back { left:24px; }
  #main .about-stage { display:flex; flex-direction:column; height:auto; padding:0 24px 62px; }
  #main .about-copy, #main .about-stage .about-left, #main .about-stage .about-right { position:relative; inset:auto; width:100%; }
  #main .about-left { order:0; }
  #main .about-visual { position:relative; order:1; inset:auto; width:calc(100% + 16px); transform:none; margin:28px -8px; }
  #main .about-center-label { display:none; }
  #main .about-editorial .about-center-copy p { font-size:3.8cqw; line-height:1.2; }
  #main .about-right { order:2; padding-left:18px; border-left:1px solid #0456f54d; }
  #main .about-marker { margin-bottom:23px; font-size:10px; }
  #main .about-editorial h1 { font-size:clamp(64px,15vw,104px); margin-bottom:24px; }
  #main .about-editorial p { font-size:16px; line-height:1.55; max-width:520px; }
  #main .about-editorial .about-lead { font-size:19px; line-height:1.5; }
  #main .about-left h2, #main .about-retail .about-left h2 { font-size:clamp(30px,7.3vw,46px); margin-bottom:20px; }
  #main .about-right h2 { font-size:22px; }
  #main .about-rule { margin:18px 0; }
  #main .about-scroll { position:relative; order:3; inset:auto; margin-top:30px; }
  #main .about-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; padding:0; border:0; }
  #main .about-stats > div, #main .about-stats > div:first-child { display:block; padding:18px 0 0; border:0; border-top:1px solid #151a212f; }
  #main .about-stats dt { font-size:clamp(30px,8.8vw,49px); margin-bottom:10px; }
  #main .about-stats dd { font-size:13px; }
  #main .about-stats > div::after { content:none; }
  #main .about-world { display:flex; align-items:center; gap:24px; margin-left:0; }
  #main .about-world svg { width:48%; }
  #main .about-world span { font-size:9px; }
  #main .about-closing { grid-template-columns:1fr; gap:25px; margin:0 24px; padding:36px 0 64px; }
  #main .about-closing .about-signoff { font-size:36px; }
  #main .about-closing > p { font-size:16px; }
  #main .about-action { justify-self:start; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  #main .about-motion .about-entered, #main .about-motion .about-word-reveal.about-entered .about-word { animation:none; }
  #main .about-motion .about-art { filter:none; opacity:1; }
  #main .about-action, #main .about-action span { transition:none; }
}
