/* ==========================================================================
   Visuolab — About page
   ========================================================================== */

/* FAQ + careers share one layer, with the light held in the upper half so it
   sits over the FAQ and fades down through the role list rather than ending on
   the seam between them */
.faq-run{position:relative}
.faq-run>section{position:relative;z-index:1}
.faq-run .aurora .s1{top:-8%;height:76%}
.faq-run .aurora .s2{top:12%;height:38%}

@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

/* ---- story hero (Arounda: one long sentence as the headline) ------------ */
.about-hero{padding:calc(var(--nav-h) + clamp(20px,4vh,40px)) 0 clamp(32px,5vh,56px)}
.about-hero .h1{max-width:none;font-size:clamp(40px,5.4vw,80px);line-height:1;white-space:nowrap}   /* three short lines, broken by hand */
.about-hero .h1 em{font-size:1.08em}
.about-lead{display:grid;grid-template-columns:1fr;gap:22px;margin-top:clamp(28px,4vh,40px)}   /* paragraph, then the fact chips beneath it */
.about-lead .lead{max-width:56ch}
.about-lead .facts{display:flex;flex-wrap:wrap;gap:10px}
.about-lead .facts li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.about-lead .facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* ---- hero 3D asset (Three.js scene in js/scene.js) ----------------------- */
.about-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,3vw,56px);align-items:center}
.about-hero .copy{min-width:0}
.about-3d{position:relative;width:min(100%,66vh,624px);aspect-ratio:1;justify-self:end;isolation:isolate}   /* the band fills ~95% of this box */
.about-3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

/* ---- project slider: case covers drifting past (Halo Lab's floating cards) -- */
.mosaic{position:relative;padding:clamp(16px,3vh,32px) 0 clamp(56px,8vh,96px);overflow:hidden}
.mosaic-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;animation:mosaic 60s linear infinite}
.mosaic:hover .mosaic-track{animation-play-state:paused}
.mosaic-track>a{flex:none;display:block;color:inherit}
.mosaic figure{margin:0;flex:none;width:clamp(224px,25.2vw,420px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.mosaic figure img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:8px 12px;border-radius:10px;
  background:rgba(4,8,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;line-height:1.3}
.mosaic figcaption b{display:block;font-weight:500}
.mosaic figcaption span{color:rgba(255,255,255,.7)}
@keyframes mosaic{to{transform:translateX(-50%)}}

/* ---- mission / vision (Increate's pair) --------------------------------- */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.mv-card{padding:clamp(28px,3vw,44px);border-radius:24px;background:var(--light-panel);color:var(--light-ink);box-shadow:0 30px 80px -50px rgba(4,8,30,.6)}
.mv-card .tag{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.04em;padding:7px 12px;border-radius:999px;border:1px solid var(--light-line);color:var(--light-muted)}
.mv-card h3{margin:clamp(28px,4vh,44px) 0 14px;font-size:clamp(40px,4.6vw,68px);line-height:.95;letter-spacing:-.035em;font-weight:500}
.mv-card h3 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em}
.mv-card p{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:#3c3c46;max-width:none;text-wrap:pretty}

/* ---- principles (Arounda) ------------------------------------------------ */
.principles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px clamp(32px,6vw,110px);align-items:start}
.principles .sec-grid{position:sticky;top:calc(var(--nav-h) + 24px)}
.principle{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px clamp(16px,2vw,32px);padding:26px 0;border-top:1px solid var(--line)}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle .num{font-family:var(--serif);font-style:italic;font-size:26px;color:rgba(255,255,255,.6);padding-top:4px}
.principle h3{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.principle p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:56ch;text-wrap:pretty}

/* ---- team grid (light) ---------------------------------------------------- */
.member{border-radius:20px;overflow:hidden;background:var(--light-panel);box-shadow:0 24px 60px -40px rgba(10,10,20,.25)}
.member .photo{aspect-ratio:4/4.6;overflow:hidden;background:#e9e9ee}
.member .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out)}
.member:hover .photo img{transform:scale(1.04)}
.member .meta{padding:16px 18px 18px}
.member .meta b{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em}
.member .meta span{display:block;font-size:13.5px;color:var(--light-muted);margin-top:3px}
.member .meta p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#3c3c46}

/* ---- story timeline --------------------------------------------------------- */
.story{padding-top:0}
.story-head{margin-bottom:clamp(56px,8vh,88px)}
.story-head .h2{max-width:18ch}
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);list-style:none;margin:0;padding:34px 0 0}
.timeline::before,.timeline::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.timeline::after{background:var(--brand-2);transform:scaleX(0);transform-origin:left;   /* the line draws itself as the row scrolls into view */
  animation:tl-fill linear both;animation-timeline:view();animation-range:entry 15% cover 60%}
@keyframes tl-fill{to{transform:scaleX(1)}}
@supports not (animation-timeline:view()){.timeline::after{transform:none}}
.milestone{position:relative}
.milestone::before{content:"";position:absolute;left:0;top:-38px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(255,255,255,.5)}
.milestone .year{font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.2vw,52px);line-height:1;color:#fff}
.milestone h3{margin-top:14px;font-size:clamp(18px,1.4vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.milestone p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---- manifesto: words light up as the paragraph scrolls through ---------- */
.manifesto .wrap{text-align:center}
.manifesto .label{margin-bottom:clamp(24px,4vh,40px)}
.manifesto-text{font-size:clamp(26px,3.3vw,54px);line-height:1.15;letter-spacing:-.025em;font-weight:500;max-width:38ch;margin-inline:auto;text-wrap:balance}
.manifesto-text em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em}
.manifesto-text .w{color:rgba(255,255,255,var(--o,.2))}
@media (prefers-reduced-motion:reduce){.manifesto-text .w{--o:1}}

/* ---- where we work: live clocks ----------------------------------------- */
.places-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(40px,6vh,64px)}
.places-head .lead{max-width:44ch;justify-self:end}
.clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.clock{position:relative;padding:clamp(22px,2.2vw,32px);border-radius:22px;
  background:var(--light-panel);border:1px solid var(--light-line);color:var(--light-ink);
  transition:box-shadow .4s,transform .6s var(--ease-out)}
/* country flag, top-right */
.clock .mark{position:absolute;top:clamp(20px,2vw,28px);right:clamp(20px,2vw,28px);line-height:0}
/* the hairline keeps the white halves of the Canadian and Singaporean flags
   from bleeding into the white card */
.clock .mark svg{width:39px;height:26px;border-radius:3.5px;box-shadow:0 0 0 1px rgba(10,10,14,.14)}
.clock:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.clock .city{display:block;font-size:clamp(20px,1.6vw,24px);font-weight:500;letter-spacing:-.02em}
.clock .country{display:block;margin-top:4px;font-size:13px;color:var(--light-muted)}
.clock .offset{color:rgba(10,10,14,.42)}
.clock .time{display:block;margin-top:clamp(28px,4vh,48px);font-size:clamp(40px,4vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.clock .time i{font-style:normal;animation:tick 1s steps(1) infinite}
@keyframes tick{50%{opacity:.25}}
.clock .status{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;color:#4a4a55}
/* deeper dot colours: the light ones read as washed out on white */
.clock .status i{width:7px;height:7px;border-radius:50%;background:#1f9e4a;box-shadow:none}
.clock.off .status i{background:#d1791f;box-shadow:none}

/* ---- careers ------------------------------------------------------------- */
.roles{border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:22px 4px;border-bottom:1px solid var(--line);color:inherit;transition:padding .35s var(--ease-out)}
.role:hover{padding-left:14px;color:var(--brand-2)}
.role b{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em}
.role span{font-size:14px;color:var(--muted)}
.role svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .3s,transform .35s var(--ease-out)}
.role:hover svg{opacity:1;transform:rotate(45deg)}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1100px){.clocks{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (max-width:900px){
  .about-lead,.principles,.about-hero .wrap,.places-head{grid-template-columns:1fr}
  .places-head .lead{justify-self:start}
  .timeline{grid-template-columns:1fr;gap:32px;padding:0 0 0 28px}
  .timeline::before,.timeline::after{top:0;bottom:0;right:auto;width:1px;height:auto}
  .timeline::after{transform:scaleY(0);transform-origin:top;animation-name:tl-fill-v}
  @supports not (animation-timeline:view()){.timeline::after{transform:none}}
  .milestone::before{left:-32px;top:14px}
  .about-3d{width:min(100%,380px);justify-self:center;margin-top:8px}
  .principles .sec-grid{position:static}
  .mv{grid-template-columns:1fr}
}
@keyframes tl-fill-v{to{transform:scaleY(1)}}
@media (max-width:640px){
  .clocks{grid-template-columns:1fr}
  .role{grid-template-columns:minmax(0,1fr) auto}
  .role span{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.mosaic-track{animation:none}}

/* careers head: centred, like the services and cases heads */
.careers-head{justify-items:center;text-align:center}