/* About page — builds on the shared tokens, grid lines and buttons in styles.css */
.ab-ic{width:40px;height:40px;flex:none;color:var(--blue)}
.ab-large{font-size:22px;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.page-about main p{color:var(--sub)}
.page-about main .ab-large{color:var(--ink)}
.ab-btn{min-height:50px;padding:12px 20px 12px 22px;gap:18px;font-size:15px}
.ab-btn .mi{width:18px;height:18px}

/* Hero */
.ab-hero{position:relative;height:max(760px,64vw)}
.ab-hero h1{position:absolute;left:4%;top:6vw;width:58%;font-size:clamp(56px,6vw,92px);line-height:1;color:var(--blue);letter-spacing:-.03em!important}
.ab-hero-copy{position:absolute;left:65.333%;top:6.6vw;width:27%;padding-left:2px}
.ab-uses{list-style:none;margin:0 0 26px;padding:0}
.ab-uses li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #346b9f24;font-size:15px;color:var(--ink)}
.ab-uses .ab-ic{width:30px;height:30px}
.ab-hero-copy>p{font-size:15px;line-height:1.6;max-width:330px}
.ab-hero-copy .ab-btn{margin-top:30px}
.ab-shot{position:absolute;margin:0;overflow:hidden;background:var(--stone)}
.ab-shot img{transition:transform 1.2s var(--ease)}
.ab-shot:hover img{transform:scale(1.04)}
.ab-shot-wide{left:4%;width:46%;top:31vw;height:28vw}
.ab-shot-wide img{object-position:50% 40%}
.ab-shot-tall{left:80.667%;width:15.334%;top:33vw;height:26vw}

/* Shared heads */
.ab-head{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end;margin-bottom:56px}
.ab-head h2,.ab-people h2{font-size:clamp(40px,4vw,62px);line-height:1.04}
.ab-hero-copy strong{font-weight:500;color:var(--ink)}

/* Made for the people in it */
.ab-people{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.ab-people-copy .ab-large{margin-top:32px}
.ab-people-copy p:not(.ab-large){margin-top:14px;max-width:500px}
.ab-quote{margin:40px 0 0;padding:24px 0 0 28px;border-left:2px solid var(--blue);font:400 26px/1.3 'Young Serif',serif;letter-spacing:-.02em;color:var(--blue);max-width:520px}
.ab-annot{position:relative;margin:0;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--stone)}
.ab-annot img{object-position:center 25%}
.ab-hot{position:absolute;left:var(--x);top:var(--y)}
.ab-hot b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #ffffff59}
.ab-hot b::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #fff;animation:ab-pulse 2.4s ease-out infinite}
.ab-hot span{position:absolute;left:18px;top:-18px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:#ffffffeb;border-radius:12px;font-size:13px;color:var(--sub);white-space:nowrap;box-shadow:0 10px 24px #2529271a;backdrop-filter:blur(6px)}
.ab-hot span strong{font:400 15px/1.2 'Young Serif',serif;color:var(--ink)}
.ab-hot.l span{left:auto;right:18px}

/* Good design goes beyond the artwork */
.ab-garment{border-top:1px solid var(--line)}
.ab-garment h2{font-size:clamp(40px,4vw,62px);line-height:1.04}
.ab-elements{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ab-elements li{display:flex;align-items:center;gap:16px;padding:22px 24px;background:#fff;border-radius:14px;font-size:16px;color:var(--ink);transition:transform .4s var(--ease),box-shadow .4s}
.ab-elements li:hover{transform:translateY(-4px);box-shadow:0 14px 30px #25292714}
.ab-could{margin:64px 0 22px;font:400 24px/1.2 'Young Serif',serif;color:var(--ink)!important}
.ab-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ab-ex-img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--stone)}
.ab-ex-img img{transition:transform 1.2s var(--ease)}
.ab-examples article:hover img{transform:scale(1.04)}
.ab-examples p{margin-top:18px;font-size:18px;line-height:1.4;color:var(--ink)!important;max-width:340px}
.ab-examples article:first-child img{object-position:center top}
.ab-aim{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.ab-aim p{font-size:18px;line-height:1.5;max-width:560px}

/* Singapore / Vietnam */
.ab-where{background:var(--blue);color:#fff}
.ab-where p,.ab-where .ab-large{color:#e2ebf4!important}
.ab-where .ab-large{color:#fff!important}
.ab-where-top{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.ab-where h2{font-size:clamp(40px,4vw,62px);line-height:1.04;margin-bottom:32px}
.ab-where-top p+p{margin-top:14px}
.ab-map{position:relative;margin:0;aspect-ratio:540/660;max-width:560px;justify-self:end;width:100%}
.ab-sea{font:italic 12px 'DM Sans',sans-serif;fill:#ffffff8c;letter-spacing:.04em}
.ab-land circle{transition:opacity .3s}
.ab-map svg{width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 72% 68% at 55% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 55% 55%,#000 62%,transparent 100%)}
.ab-pin-label{text-shadow:0 0 12px #346b9f,0 0 4px #346b9f}
.ab-route{stroke-dashoffset:0;animation:ab-flow 1.6s linear infinite}
@keyframes ab-flow{to{stroke-dashoffset:-28}}
.ab-pin circle:first-child{transform-origin:center;transform-box:fill-box;animation:ab-pulse 2.4s ease-out infinite}
@keyframes ab-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.ab-pin-label{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#e2ebf4}
.ab-pin-label strong{font:400 22px/1.1 'Young Serif',serif;color:#fff}
.ab-sg{left:43%;top:91%}
.ab-vn{left:67%;top:43%}
.ab-where-end{margin-top:28px;padding-top:24px;border-top:1px solid #ffffff4d;max-width:520px;font-size:17px;line-height:1.5}

/* One thread */
.ab-thread{text-align:center;border-top:1px solid var(--line)}
.ab-thread h2{font-size:clamp(40px,4vw,62px);line-height:1.04;max-width:820px;margin:0 auto}
.ab-thread-copy{max-width:620px;margin:26px auto 0;font-size:17px;line-height:1.6}
.ab-line{position:relative;height:230px;margin:48px 0 40px;color:var(--blue)}
.ab-line svg{position:absolute;inset:30px 0;width:100%;height:140px}
.ab-line ol{list-style:none;margin:0;padding:0}
.ab-line li{position:absolute;left:var(--x);top:calc(30px + var(--y));width:0;height:0}
.ab-line li b{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--blue)}
.ab-line li span{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font-size:15px;color:var(--ink)}
.ab-line li.up span{bottom:18px}
.ab-line li.down span{top:18px}
.ab-tagline{max-width:900px;margin:0 auto;font:400 clamp(32px,3vw,46px)/1.15 'Young Serif',serif;letter-spacing:-.02em;color:var(--blue)!important}
.ab-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease)}
.js .ab-draw:not(.ab-in){stroke-dashoffset:1}

/* CTA */
.ab-cta .contact-blue p{color:#e2ebf4!important;max-width:420px;margin-top:26px;font-size:18px;line-height:1.5}
.ab-cta-actions{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:18px}
.ab-cta-link{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;font-size:16px;color:#fff;border-bottom:1px solid #ffffff80;padding:6px 0}
.ab-cta-link .mi{width:18px;height:18px;fill:currentColor;transition:transform .3s var(--ease)}
.ab-cta-link:hover .mi{transform:translateX(4px)}

/* Motion */
.js .ab-up{opacity:0;transform:translateY(36px);transition:opacity .7s ease-out,transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .ab-left{opacity:0;transform:translateX(-70px);transition:opacity .8s ease-out,transform 1.1s var(--ease)}
.js .ab-up.ab-in,.js .ab-left.ab-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .ab-up,.js .ab-left{opacity:1;transform:none;transition:none}.js .ab-draw:not(.ab-in){stroke-dashoffset:0}.ab-route,.ab-pin circle:first-child,.ab-hot b::after{animation:none}}

/* Figma update: darker hero copy, plain quote, blue hotspots on the white tee, wider map copy */
.page-about .ab-hero-copy>p{font-size:17px;line-height:1.55;color:var(--ink);max-width:360px}
.ab-shot-wide img{object-position:center}
.ab-quote{padding:0;border-left:0;font-size:28px;max-width:560px}
.ab-hot b{background:#7ea6d6;box-shadow:0 0 0 6px #7ea6d64d}
.ab-hot b::after{border-color:#7ea6d6}
.ab-where-top{grid-template-columns:1.15fr 1fr;gap:5%}
.ab-where h2{max-width:none}