html,body{margin:0;padding:0}
body{background-color:#ffffff;color:#000000;font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#000000;text-decoration:none}
a:hover{color:#FF9179}
html{scrollbar-color:#00C4B4 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#00C4B4;border-radius:9999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#FF9179;background-clip:content-box}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* !important because the tracks carry the animation as an inline shorthand, whose
   own play-state would otherwise win over anything a stylesheet asks for. */
[data-mq]:hover [data-mqtrack]{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){[data-mqtrack]{animation:none!important}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes section-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.cd-reveal{animation:section-reveal .68s cubic-bezier(.22,.8,.24,1) both}
[data-tree="mob"]{display:none;overflow-x:clip;max-width:100%}
[data-mrail]{scrollbar-width:none;-ms-overflow-style:none}
[data-mrail]::-webkit-scrollbar{display:none;width:0;height:0}
[data-mstep]:nth-last-child(2) [data-mconn]{display:none!important}

@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}
  [data-tree="desk"]{display:none!important}
  [data-tree="mob"]{display:flex!important}
  html{scroll-behavior:smooth}
  /* no visible page scrollbar on mobile — matches native touch behaviour */
  html,body{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
}

@keyframes blob-drift{0%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(3%,-2.5%) rotate(3deg) scale(1.05)}50%{transform:translate(0.5%,3%) rotate(-1deg) scale(1.02)}75%{transform:translate(-3%,1%) rotate(-3deg) scale(1.05)}100%{transform:translate(0,0) rotate(0deg) scale(1)}}

/* hover states, lifted from the design's style-hover attributes */
.scp0:hover { color: rgb(0, 0, 0) !important; }
.scp1:hover { background: rgb(244, 244, 244) !important; }
.scp2:hover { color: rgb(255, 255, 255) !important; opacity: 0.85 !important; }
.scp3:hover { color: rgb(255, 255, 255) !important; opacity: 0.9 !important; }
.scp4:hover { transform: scale(1.05) !important; }
.scp5:hover { background-color: rgba(0, 196, 180, 0.12) !important; }

[data-menu][hidden]{display:none}

/* ---- hero copy, centred against the cards: see build.js ---- */
[data-r~="hero"] > [data-r~="grid12"] > div:first-child{align-self:center}

/* ---- laptop fit: see build.js ---- */
@media (min-width:901px) and (max-width:1512px){
  :root{--z:.8; zoom:var(--z)}
  body>div:first-child{min-height:calc(100vh / var(--z))!important}
  [data-r~="hero"]{min-height:calc(100dvh / var(--z))!important}
  [data-bleed]{left:calc(50% - 50vw / var(--z))!important; width:calc(100vw / var(--z))!important}
}