html { scroll-behavior: smooth; }
body { background:#F6F9FB; color:#0C1B2A; }

/* Faint fixed CoLab logo watermark, visible across every section regardless of
   its own background colour. Sits above content at very low opacity rather
   than behind it, since most sections use full-bleed solid backgrounds that
   would otherwise hide a body-level background entirely. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  background-image: url(/colab/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(58vw, 560px);
  opacity: 0.09;
  pointer-events: none;
}
::selection { background:#1ACEDF; color:#073763; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #1ACEDF; outline-offset: 3px; border-radius: 2px; }

.container-x { max-width: 1260px; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }
@media (min-width:1024px){ .container-x { padding-left:2.5rem; padding-right:2.5rem; } }

/* reveal on scroll */
.reveal { opacity:0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.16,.8,.28,1), transform 1s cubic-bezier(.16,.8,.28,1); }
.reveal.in { opacity:1; transform: translateY(0); }
.reveal-delay-1.in { transition-delay: .2s; }
.reveal-delay-2.in { transition-delay: .4s; }
.reveal-delay-3.in { transition-delay: .6s; }
.reveal-delay-4.in { transition-delay: .8s; }

/* When a reveal block wraps a heading directly (the common tag+h2+p section-intro
   pattern), animate the heading and what follows it as independently staggered
   elements instead of one flat block, so paragraphs visibly follow the heading. */
.reveal:has(> h1, > h2, > h3) { opacity:1; transform:none; transition:none; }
.reveal:has(> h1, > h2, > h3) > * {
  opacity:0; transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.16,.8,.28,1), transform .9s cubic-bezier(.16,.8,.28,1);
}
.reveal.in:has(> h1, > h2, > h3) > * { opacity:1; transform:translateY(0); }
.reveal:has(> h1, > h2, > h3) > :is(h1,h2,h3) ~ * { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal:has(> h1, > h2, > h3) > * { opacity:1 !important; transform:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* nav */
#nav { transition: padding .35s ease-out, background-color .35s ease-out, box-shadow .35s ease-out; }
#nav.scrolled { box-shadow: 0 1px 0 rgba(7,55,99,.08), 0 12px 30px -20px rgba(7,55,99,.25); }

.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#1ACEDF; border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform .25s ease-out; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color:#F6F9FB; font-weight:700; }

/* hamburger: plain-CSS fallback so the icon renders even if compiled CSS is slow to load */
#burgerBtn { width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; z-index:50; }
@media (min-width:1024px){ #burgerBtn { display:none; } }
.burger-line { display:block; width:24px; height:2px; background:#F6F9FB; transition: transform .3s ease-out, opacity .3s ease-out; transform-origin: center; }
.burger.open .l1 { transform: translateY(7px) rotate(45deg); }
.burger.open .l2 { opacity: 0; }
.burger.open .l3 { transform: translateY(-7px) rotate(-45deg); }

/* full-screen mobile nav */
#mobileMenu { position:fixed; inset:0; z-index:45; background:#F6F9FB; display:flex; flex-direction:column; opacity:0; transform: translateY(-10px); pointer-events:none; transition: opacity .3s ease-out, transform .3s ease-out; overflow-y:auto; }
#mobileMenu.open { opacity:1; transform:translateY(0); pointer-events:auto; }
#desktopNav, #navCta { display:none; }
@media (min-width:1024px){ #desktopNav { display:flex; } #navCta { display:inline-flex; } }

/* hero background blobs + node animation */
.blob { position:absolute; border-radius:9999px; filter: blur(90px); pointer-events:none; }
.node-drift { animation: drift 9s ease-in-out infinite; }
.node-drift2 { animation: drift 11s ease-in-out infinite reverse; }
.node-pulse { animation: pulseOp 3.2s ease-in-out infinite; }
@keyframes drift { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(6px,-10px);} }
@keyframes pulseOp { 0%,100%{ opacity:.35;} 50%{ opacity:1;} }
@media (prefers-reduced-motion: reduce){ .node-drift,.node-drift2,.node-pulse{ animation:none; } }

/* auto-sliding logo marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* interactive "How We Work" journey selector */
.journey-row { display:flex; justify-content:space-between; align-items:flex-start; position:relative; gap: 0.5rem; }
.journey-line { position:absolute; top:24px; left:0; right:0; height:2px; background:rgba(7,55,99,.12); }
.journey-line-fill { position:absolute; top:24px; left:0; height:2px; background:#12A7B6; width:0%; transition:width .5s cubic-bezier(.16,.8,.28,1); }
.journey-step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.75rem; background:none; border:0; cursor:pointer; padding:.25rem; flex:1; }
.journey-dot { width:48px; height:48px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border:2px solid rgba(7,55,99,.18); background:#F6F9FB; color:rgba(7,55,99,.4); transition: transform .3s cubic-bezier(.16,.8,.28,1), background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out, box-shadow .3s ease-out; }
.journey-step:hover .journey-dot { border-color:#12A7B6; color:#073763; }
.journey-step:focus-visible .journey-dot { outline: 2px solid #1ACEDF; outline-offset: 2px; }
.journey-step.is-active .journey-dot { background:#073763; border-color:#073763; color:#F6F9FB; transform:scale(1.1); box-shadow:0 8px 20px -8px rgba(7,55,99,.5); }
.journey-label { font-size:13px; font-weight:600; color:rgba(7,55,99,.45); text-align:center; max-width:100px; transition: color .3s ease-out; }
.journey-step.is-active .journey-label { color:#073763; }
.journey-panel-content { display:none; }
.journey-panel-content.is-active { display:block; animation: journeyFadeIn .5s cubic-bezier(.16,.8,.28,1); }
@keyframes journeyFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .journey-dot, .journey-line-fill, .journey-label { transition:none; }
  .journey-panel-content.is-active { animation:none; }
}
@media (max-width: 639px) {
  .journey-row { flex-wrap: wrap; row-gap: 1.5rem; justify-content: center; }
  .journey-line, .journey-line-fill { display:none; }
  .journey-step { flex: 0 0 auto; width: 30%; }
  .journey-label { max-width:80px; font-size:11px; }
}

/* "Shared Stories" testimonial carousel controls */
.story-nav-btn { width:44px; height:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(246,249,251,.25); background:rgba(246,249,251,.06); color:#F6F9FB; cursor:pointer; transition: background-color .25s ease-out, border-color .25s ease-out, transform .2s ease-out; }
.story-nav-btn:hover { background:rgba(246,249,251,.14); border-color:rgba(246,249,251,.45); }
.story-nav-btn:active { transform: scale(.92); }
.story-dot { width:8px; height:8px; border-radius:9999px; background:rgba(246,249,251,.25); border:0; padding:0; cursor:pointer; transition: background-color .3s ease-out, transform .3s ease-out; }
.story-dot:hover { background:rgba(246,249,251,.45); }
.story-dot.is-active { background:#1ACEDF; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .story-nav-btn, .story-dot { transition:none; }
}

.hairline { border-color: rgba(7,55,99,.12); }

/* "Our Team" portrait treatment: brush-stroke accent behind a circular photo */
.team-photo-wrap { position:relative; width:128px; height:128px; margin:0 auto; }
.team-photo-splash { position:absolute; inset:-16px; color:#1ACEDF; opacity:.6; z-index:0; pointer-events:none; }
.team-photo-wrap.is-flipped .team-photo-splash { transform: scaleX(-1); }
.team-photo-wrap img { position:relative; z-index:1; }

.team-arrow-btn { width:44px; height:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(26,206,223,.55); color:#1ACEDF; background:#fff; cursor:pointer; transition: background-color .25s ease-out, color .25s ease-out, border-color .25s ease-out, transform .2s ease-out; }
.team-arrow-btn:hover { background:#1ACEDF; color:#fff; border-color:#1ACEDF; }
.team-arrow-btn:active { transform: scale(.92); }
.team-arrow-btn svg { transition: transform .3s ease-out; }
.team-arrow-btn.is-open svg { transform: rotate(90deg); }

.team-bio-panel { display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease-out; }
.team-bio-panel.is-open { grid-template-rows:1fr; }
.team-bio-panel > div { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
  .team-arrow-btn, .team-arrow-btn svg, .team-bio-panel { transition:none; }
}

/* FAQ accordion — same expand mechanic as .team-bio-panel, styled as a card list */
.faq-item { transition: border-color .25s ease-out, box-shadow .25s ease-out; }
.faq-item.is-open { border-color: rgba(26,206,223,.5); box-shadow: 0 16px 32px -20px rgba(7,55,99,.25); }
.faq-trigger { cursor:pointer; }
.faq-chevron { transition: transform .3s ease-out; color:#0A4A7E; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color:#12A7B6; }
.faq-panel { display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease-out; }
.faq-item.is-open .faq-panel { grid-template-rows:1fr; }
.faq-panel > div { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-chevron, .faq-panel { transition:none; }
}

.card-lift { transition: transform .35s cubic-bezier(.16,.8,.28,1), box-shadow .35s ease-out, border-color .35s ease-out; box-shadow: 0 1px 2px rgba(7,55,99,.04); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(7,55,99,.28); border-color: rgba(7,55,99,.18); }

.btn-primary { background:#073763; color:#F6F9FB; transition: background .3s ease-out, transform .3s ease-out, box-shadow .3s ease-out; box-shadow: 0 10px 24px -12px rgba(7,55,99,.55); }
.btn-primary:hover { background:#0A4A7E; transform: translateY(-2px); }
.btn-ghost { border:1.5px solid rgba(7,55,99,.25); transition: border-color .3s ease-out, background .3s ease-out, transform .3s ease-out; }
.btn-ghost:hover { border-color:#073763; background: rgba(7,55,99,.05); transform: translateY(-2px); }
.btn-gold { background:#FFC857; color:#073763; transition: background .3s ease-out, transform .3s ease-out; }
.btn-gold:hover { background:#E8A93A; transform: translateY(-2px); }
.btn-sky { background:#1ACEDF; color:#073763; transition: background .3s ease-out, transform .3s ease-out; }
.btn-sky:hover { background:#12A7B6; color:#F6F9FB; transform: translateY(-2px); }

.tag { font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }

.underline-sky { background-image: linear-gradient(#DBF7FA,#DBF7FA); background-repeat:no-repeat; background-size:100% 12px; background-position: 0 90%; }

.filter-btn { transition: all .25s ease-out; }
.filter-btn.active { background:#073763; color:#F6F9FB; border-color:#073763; }

/* modal */
#projectModal { transition: opacity .3s ease-out; }
#projectModal .modal-panel { transition: transform .35s cubic-bezier(.16,.8,.28,1), opacity .35s ease-out; }

.counter-num { font-variant-numeric: tabular-nums; }

.timeline-rail { position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: rgba(7,55,99,.15); }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-thumb { background: rgba(7,55,99,.25); border-radius: 999px; }